vue 消息訂閱與發布

一、場景

　　vue中非父子組件之間通信時，使用vuex有時間會很麻煩，這時候可以通過bus總線來實現 消息的訂閱與發布

 

二、實現方法

　　1、main.js

//main.js
 
Vue.prototype.bus = new Vue();
new Vue({
  render: h => h(App)
    ...
}).$mount('#app');
/*
*通過把一個vue實例賦於Vue構造函數原型上的一個屬性bus（當然起任何名稱都是可以的）
*而每個Vue實例都是有$emit和$on方法的
*由於bus屬性在Vue原型上，根據原型鏈查找規則，在頁面中我們就可以通過 this.bus.$emit 和 
*this.bus.$on來進行跨組件通信了
*/

　　2、消息發布

　　可以在任何組件中

 

//發布一個事件
this.bus.$emit('even-name'，args1, arg2 , ...)

　　3、消息訂閱

　　一般可以寫在 created 或 mounted 中

 

// 消息訂閱
this.bus.$on('event-name', (...args) => {
    //接收參數，觸發方法相應的方法等操作
})