这一版主要讲 EventBus 在 vue2 中的使用
初始化
import Vue from 'vue';
Vue.prototype.$EventBus = new Vue();
监听和触发
- 监听的组件
export default {
mounted() {
this.$EventBus.$on('eventName', (res) => {
// handle event data
});
},
beforeDestroyed() {
this.$EventBus.$off('eventName');
}
}
注意:
1> 建议事件监听放在组件 挂载 时去监听,如果放在组件生命周期 created
中监听会导致切换组件时不生效。
2> 监听事件也需要在组件生命周期 结束 时解绑该监听事件
- 触发事件
export default {
methods: {
emitEvent() {
this.$EventBus.$emit('eventName', {
// data about event need to send
})
}
}
}
注意:
1> 触发 EventBus 事件需要其它组件监听该事件
2> 建议事件名唯一,避免组件切换、路由切换时不同生命周期导致重复监听