vue3中事件总线的使用

事件总线

Vue3从实例中移除了 $on、$off 和 $once 方法，所以我们如果希望继续使用全局事件总线的话，就需要通过第三方库：

Vue3官方有推荐一些库，例如 mitt 或 tiny-emitter；

这里我们主要说一下mitt库的使用；

首先，我们需要先安装这个库：

npm install mitt

其次，我们为了 避免对其的依赖，因此需要封装成一个单独的eventbus.js文件：

import mitt from 'mitt';

const emitter = mitt();

export default emitter;

事件总线工具的使用

我们可以在某个组件中触发事件：

//在这里我们就只需要引入我们封装的emitter函数就行了
import emitter from './utils/eventbus';

export default {
    methods: {
        btnClick() {
            emitter.emit("why", {name: "why", age: 18});
        }
    }
}

我们可以在某个组件中去监听该事件：

import emitter from './utils/eventbus';

export default {
    created() {
        emitter.on("why", (info) => {
            console.log("why:", info);
        });

        emitter.on("kobe", (info) => {
            console.log("kobe:", info);
        });

        emitter.on("*", (type, info) => {
            console.log("* listener:", type, info);
        })
    }
}

mitt的事件取消

//取消对emitter中所有的监听
emitter.all.clear();

//定义一个函数
function  onFoo() {}
emitter.on("onFoo", onFoo) //监听
emitter.off("onFoo", onFoo)  //取消监听

最后

以上就是失眠御姐为你收集整理的vue3中事件总线的使用的全部内容，希望文章能够帮你解决vue3中事件总线的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。