聊聊mitt

157 阅读2分钟

mitt:我自己理解 应该也就是实现组件通信的 (原理采用了发布订阅者模式实现)
前言:VForm3源码里面使用了mitt插件库使兄弟组件通信

先说我遇见的问题吧!
场景:当我在列表页 点击新增进入vForm3页面,右侧表单设置 模板类型。下拉则显示所选中模板,同时提示表单模板加载成功,奇怪的是 第一次点击新增进来没有任何错误bug,当我点击返回至列表页 再次点击新增 再次下拉选中一个模板,奇怪的是 表单模板加载成功竟然加载了两次,再操作一遍,提示三次。。。

image.png


先看代码

form-setting.vue代码,可见绑定了一个change事件

image.png 这里发射了resetting事件 image.png

widget-panel/index.vue代码,在mounted函数里面监听resetting事件

image.png

这是destroyResetting方法

image.png
这是loadFormTemplate方法,由此可见在可出弹出表单模板加载成功消息提示

image.png

排查问题

模板下拉则发射事件,另外一个组件监听到事件,从而触发loadFormTemplate函数
如下图片可见,destroyResetting监听函数打印触发了多次导致。

1a7069ad8798c42331b311b49428fcb.png

我怀疑是不是监听事件一直存在叠加,所以在widget-panel/index.vue组件当中写了beforeUnmount函数,页面销毁 清除监听

image.png

image.png

发现没有任何作用。。。 我这里就很疑惑 ,我这不是在组件销毁的时候清除了这个事件的监听吗 怎么还是不行 ,这里我一直没太懂,有知道的大佬评论区留言一下~万分感谢!

后来想着不用他里面写好的 自己重新导出一个mitt事件使用
新建bus.js文件

b3c6503cc1a422a48f19fb5e149b4ae.png

引入

image.png

使用

发射事件

image.png

监听事件

image.png

image.png

image.png

大功告成!!!