Vue中bus总线的使用。

Posted 2020-12-10 xiongk

vue中可能会遇到两个没有关系的组件之间的通信。

npm install vue-bus

引入

import Vue from ‘vue‘;
import bus from ‘vue-bus‘;
Vue.use(bus);

创建发送数据

this.$bus.emit("eventName",data)

响应接收数据

this.$bus.on("eventName",(data) => { console.log(data)})

this的作用域要指向当前的vm实例，on监听事件一般放在组件生命周期函数中的created或者mounted中，注销bus需要在beforeDestroy中；

页面路由的时候，原有页面中的bus事件并没有被注销，依然隐藏在程序中，注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况可以在离开界面时注销bus。

beforeDestroy () {
    this.$bus.$off(‘eventName‘,this.todo);
}