vue——bus總線

參考：vue用公共組件頁面傳值_Vue 解決兄弟組件之間傳值問題_funny 靈魂的博客-CSDN博客

　　vue Bus總線 - fanlinqiang - 博客園 (cnblogs.com)

　　vue.js之路(4)——vue2.0s中eventBus實現兄弟組件通信_YuuyaRin的博客-CSDN博客

　　vue中使用$bus - 古墩古墩 - 博客園 (cnblogs.com)

　　淺談Vue.use - SegmentFault 思否

 

 

使用場景：非父子組件之間的通信，當然也可以使用vuex，但小型項目可以考慮使用bus

 

使用方式：

 

方式一. 組件調用時先引入

但這種引入方式，經過webpack打包后可能會出現Bus局部作用域的情況，即引用的是兩個不同的Bus，導致不能正常通信

 

Bus.js：

import Vue from 'vue'
const Bus = new Vue()
export default Bus

組件1：

import Bus from 'util/Bus'

export default {
    data() {
        return {
            .........
            }
      },
    created() {
    /* 
     * 必須要在 vue 的created鈎子函數中來觸發這個bus，在頁面還沒加載的時候先觸發它然后拿到數據
     * 在created中執行，可以避免很多坑, 例如觸發bus無法拿到數據等問題
     */
       Bus.$on('log', val=> { 
          console.log(val)
        });    
    },  
    beforeDestoyed() {
       Bus.$off('log'); // 銷毀bus方法'log'，是避免方法“冗余”。若不清除這個方法，將會出現多個bus觸發時，每次都會將這個方法注入在這個vue的生命周期中
    }   
}             

組件2：

import Bus from './Bus'

export default {
    data() {
        return {
            .........
            }
      },
  methods: {
        ....
        Bus.$emit('log', 120)
    },

  } 

 

方式二. 直接在vue實例上綁定

main.js：

Vue.prototype.$bus = new Vue();

組件1：

created() {
    this.$bus.$on('log', val => {
      console.log(val);
    });
  },
beforeDestroyed() {
    this.$bus.$off('log');
  }

組件2：

this.$bus.$emit('log', 120);

 

方式三. 插件化

Bus.js:

import Bus from 'vue';
let install = function(Vue) {
  Vue.prototype.$bus = new Bus(); 
};

export default { install };

main.js：

import Vue from 'vue';
import Bus from 'util/Bus';
... ...

Vue.use(Bus); // 調用Bus中的install方法
... ...

組件1：

created() {
    this.$bus.$on('log', val => {
      console.log(val);
    });
  },
beforeDestroyed() {
    this.$bus.$off('log');
  }

組件2：

this.$bus.$emit('log', 120);