vue兄弟组件间通信&eventbus遇到的问题(多次触发、第一次不触发)
EventHub 是一个非常重要且常用的东西,在不相关组件通信方面有着很强大的作用。EventHub想想如果从最顶层组件传一个 data 给最底层组件,仅仅使用父子传递的方式会变得十分麻烦。而 EventHub 就是用来解决这个问题的:在需要获取 data 的组件上设置一个监听器,每次要传递 data 时,那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个:
EventHub 是一个非常重要且常用的东西,在不相关组件通信方面有着很强大的作用。
形象生动讲解:移步这。
EventHub
想想如果从最顶层组件传一个 data 给最底层组件,仅仅使用父子传递的方式会变得十分麻烦。
而 EventHub 就是用来解决这个问题的:在需要获取 data 的组件上设置一个监听器,每次要传递 data 时,那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个: 监听和广播,当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能,我们可以使用 Vue 来描述这些功能:
let eventHub = new Vue()
// 监听
eventHub.$on('eventName', (data) => {
console.log('Trigger this event and receive ' + data)
})
// 广播
eventHub.$emit('eventName', data)
// 去掉监听
eventHub.$off('eventName')
其本质上这里就借用了 Vue 的事件监听功能来完成 EventHub
的。
下面介绍一下怎么实现的:
依赖注入
eventHub
是个全局变量呀,难道我们要将它放在入口 main.js
里面初始化么?还是放在 Vue.prototype
里直接用 this.eventHub
来使用呢?
在我们使用的antd的vue框架中初始化 EventHub
,并使用 provide
对外暴露这个 EventHub
。
APP.vue
文件中敲如下代码:
import Vue from "vue";
export default {
name: "App",
components: {
GrandParent
},
data() {
return {
eventHub: new Vue()
};
},
provide() {
return {
eventHub: this.eventHub
};
},
methods: {
setRandomValue() {
this.eventHub.$emit("update:msg", Math.random() * 100);
}
}
};
然后在需要监听的组件里用 inject
注入这个依赖,并在 created
里添加事件监听。
export default {
inject: ["eventHub"],
data() {
return {
msg: ""
};
},
created() {
this.eventHub.$on("update:msg", msg => {
this.msg = msg;
});
}
};
最终的结果是在 App 里修改 msg
,添加监听事件的子组件都会获取最新的 msg
,并用其再更新自己的数据或者状态。
这里网上有大佬做了个demo,链接抛出来:参考代码放在 CodeSandBox 点击这里查看
eventHub
问题
- 第一次触发的时候,接收参数传值的界面的
on
事件没有被触发 - 为什么后面再一次依次去触发的时候会出现,每一次都会发现好像之前的on事件分发都没有被撤销一样,导致每一次的事件触发执行越来越多。
原因及解决办法
-
当我们还在页面A的时候,页面B还没生成,也就是页面B中的
created
中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit
事件的时候,B其实是没有监听到的,当你从页面A到页面B跳转的时候,发生了什么?首先是先B组件先
created
然后beforeMount
接着A组件才被销毁,A组件才执行beforeDestory
,以及destoryed
所以,我们可以把A页面组件中的
emit
事件写在beforeDestory
中去。因为这个时候,B页面组件已经被created
了,也就是我们写的$on
事件已经触发了修改如下:在
beforeDestory
生命周期里,$emit
事件:
beforeDestroy () {
this.eventHub.$emit('update:msg',this.data)
}
- 因为B页面
$on
事件是不会自动清楚销毁的,需要我们手动来销毁,所以我在B组件页面中添加this.eventHub.$off
来关闭,销毁后就不存在执行多次的情况了 。代码如下:
// 在B组件页面中添加以下语句,在组件beforeDestory的时候销毁。
beforeDestroy () {
this.eventHub.$off('update:msg')
},
总结
用eventBus 来进行页面组件之间的数据传递,需要注意三点:
- 事件名必须保持统一,也就是上述例子的
update:msg
; - 组件A
$emit
事件应在beforeDestory
生命周期内; - 其次,组件B内的
$on
记得要销毁。
最后加个链接,大佬介绍的vue组件六种通讯方式,点击这里,其实vue组件间通讯最好的方法是vuex
。具体的用法自行百度学习咯。
更多推荐
所有评论(0)