mitt:我自己理解 应该也就是实现组件通信的 (原理采用了发布订阅者模式实现)
前言:VForm3源码里面使用了mitt插件库使兄弟组件通信
先说我遇见的问题吧!
场景:当我在列表页 点击新增进入vForm3页面,右侧表单设置 模板类型。下拉则显示所选中模板,同时提示表单模板加载成功,奇怪的是 第一次点击新增进来没有任何错误bug,当我点击返回至列表页 再次点击新增 再次下拉选中一个模板,奇怪的是 表单模板加载成功竟然加载了两次,再操作一遍,提示三次。。。
先看代码
form-setting.vue代码,可见绑定了一个change事件
这里发射了resetting事件
widget-panel/index.vue代码,在mounted函数里面监听resetting事件
这是destroyResetting方法
这是loadFormTemplate方法,由此可见在可出弹出表单模板加载成功消息提示
排查问题
模板下拉则发射事件,另外一个组件监听到事件,从而触发loadFormTemplate函数如下图片可见,destroyResetting监听函数打印触发了多次导致。
我怀疑是不是监听事件一直存在叠加,所以在widget-panel/index.vue组件当中写了beforeUnmount函数,页面销毁 清除监听
发现没有任何作用。。。 我这里就很疑惑 ,我这不是在组件销毁的时候清除了这个事件的监听吗 怎么还是不行 ,这里我一直没太懂,有知道的大佬评论区留言一下~万分感谢!
后来想着不用他里面写好的 自己重新导出一个mitt事件使用
新建bus.js文件
引入
使用
发射事件
监听事件
大功告成!!!