项目场景:

在vue3 的项目中需要用到vue2中的bus 中央事件, 于是就找到了mitt。但是在项目中发现mitt监听事件会多次的触发,记录一下这个问题的解决方法及mitt 的基本使用。


mitt安装

下载包

npm install --save mitt

 在main.js中引入使用

import mitt from "mitt";
const app = createApp(App);
app.config.globalProperties.$bus = mitt(); // 自定义添加

mitt使用方法:

(1)在任意一个页面触发 添加一个动态组件

this.$nextTick(function() {
    this.$bus.emit("事件名称","传递的参数"),
})

(2)在动态组件中监听事件

mounted() {
    this.$bus.on("事件名称", (接收的参数) => {
        console.log(接收的参数)
    })
}

解决mitt多次触发的方法:

每当页面关闭的时候, 去销毁这个事务线程  (在监听事件的页面)【vue3.0 页面销毁生命周期是beforeUnmount】

beforeUnmount() {
    this.$bus.all.delete("changeOdr")
}
Logo

前往低代码交流专区

更多推荐