vue3的兄弟组件通信(事件总线)
vue3 从 实例中 移除了 $on$off$once 方法,所以我们如果想要继续使用全局事件总线,要通过第三方库*vue3 推荐 mitt和 tiny-emitter,在这里记录以下mitt *mitt 可以用于兄弟组件 也可以爷孙 组件首先 安装npm i mitt# eventBus.jsimport mitt from 'mitt'const emitter = mitt()export
·
vue3 从 实例中 移除了 $on $off $once 方法,所以我们如果想要继续使用全局事件总线,要通过第三方库
*vue3 推荐 mitt 和 tiny-emitter,在这里 记录以下 mitt *
mitt 可以用于 兄弟组件 也可以 爷孙 组件
首先 安装 npm i mitt
# eventBus.js
import mitt from 'mitt'
const emitter = mitt()
export default emitter
# 爷组件
import emitter from "./eventBus.js";
methods: {
handle() {
console.log("开始发射事件");
emitter.emit("ddg", { name: "呆呆狗" });
},
},
# 孙组件
created() {
emitter.on("ddg", (chanshu) => {
console.log(chanshu);
});
// 也可以直接监听全部 的事件
emitter.on("*", (type, info) => {
// type 是 具体那个事件
// info 是参数
console.log(type, info);
});
// 取消函数的监听
/*
取消全部的 监听
emitter.all.clear()
取消单个监听
function onFoo(){}
emitter.on('foo',onFoo)
emitter.off('foo',onFoo) 取消监听
*/
},
更多推荐
已为社区贡献4条内容
所有评论(0)