Ⅰ Qu'est-ce qu'eventBus ?
En termes simples, dans n'importe quel composant, vous souhaitez transmettre le message (paramètre) -> à n'importe quel composant et exécuter une certaine logique.
Ⅱ. Comment vue3 utilise eventBus
- Il n'y a pas d'eventBus dans vue3, nous devons donc l'écrire nous-mêmes, mais c'est très simple.
Étape 1 (conteneur eventBus)
- Dans le répertoire src, créez un dossier bus pour stocker le bus.js écrit par vous-même ;
- Écrivez bus.js => liez trois fonctions (s'abonner, se désabonner, publier) au prototype de classe ;
// bus.js
class Bus {
constructor() {
this.list = {
}; // 收集订阅
}
// 订阅
$on(name, fn) {
this.list[name] = this.list[name] || [];
this.list[name].push(fn);
}
// 发布
$emit(name, data) {
if (this.list[name]) {
this.list[name].forEach((fn) => {
fn(data); });
}
}
// 取消订阅
$off(name) {
if (this.list[name]) {
delete this.list[name];
}
}
}
export default new Bus;
- Abonné (on), mettre la fonction dans la liste => attendre l'éditeur (emit), passer les paramètres à appeler ;
- La fonction étant un objet, l'adresse mémoire n'a pas changé et est toujours exécutée dans le composant abonné (on).
Étape 2 (Abonnés)
- Abonnez-vous à comA.vue;
- Les abonnements stockent uniquement les fonctions et ne les exécutent pas tant qu'elles ne sont pas publiées ;
<template>
<div>
{
{ name }} --- {
{ age }}
</div>
</template>
<script>
import {
ref , onUnmounted} from 'vue';
import Bus from '../bus/bus.js';
export default {
setup() {
const name = '张三';
const age = ref(18)
Bus.$on('addAge',({
num })=>{
age.value = num; })
//组件卸载时，取消订阅
onUnmounted( () => {
Bus.$off('addAge') } )
}
}
</script>
- Lorsque vous quittez le composant (onUnmounted), supprimez le tableau des fonctions enregistrées et souscrites pour éviter d'en stocker de plus en plus.
Étape 3 (Éditeur)
- Publier dans comB.vue;
- Appeler les paramètres d'abonnement et de passe ;
<template>
<button @click="fabu">发布</button>
</template>
<script>
import Bus from '../bus/bus.js';
export default {
setup() {
function fabu(){
Bus.$emit('addAge',{
age:'19'});
}
}
}
</script>
- Après la publication, le composant de l'abonné sera exécuté. Notez que le nom de l'abonnement et de la publication correspondants doit être le même.