Ⅰ ¿Qué es eventBus?
En términos simples, en cualquier componente, desea pasar el mensaje (parámetro) -> a cualquier componente y ejecutar cierta lógica.
Ⅱ Cómo vue3 usa eventBus
- No hay eventBus en vue3, por lo que tenemos que escribirlo nosotros mismos, pero es muy simple.
Paso 1 (contenedor eventBus)
- En el directorio src, cree una carpeta de bus para almacenar el bus.js escrito por usted mismo;
- Escribir bus.js => enlazar tres funciones (suscribirse, darse de baja, publicar) al prototipo de clase;
// 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;
- Suscriptor (activado), poner la función en la lista => esperar al editor (emitir), pasar parámetros para llamar;
- Dado que la función es un objeto, la dirección de memoria no ha cambiado y aún se ejecuta en el componente de suscriptor (encendido).
Paso 2 (Suscriptores)
- Suscríbete en comA.vue;
- Las suscripciones solo almacenan funciones y no las ejecutan hasta que se publican;
<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>
- Al salir del componente (onUnmounted), elimine la matriz de funciones registradas y suscritas para evitar almacenar más y más.
Paso 3 (Editor)
- Publicar en comB.vue;
- Parámetros de abono y abono de llamadas;
<template>
<button @click="fabu">发布</button>
</template>
<script>
import Bus from '../bus/bus.js';
export default {
setup() {
function fabu(){
Bus.$emit('addAge',{
age:'19'});
}
}
}
</script>
- Después de la publicación, se ejecutará el componente del suscriptor. Tenga en cuenta que el nombre de la suscripción y la publicación correspondientes deben ser los mismos.