Vue中的$Bus使用

將Bus單獨抽離成一個文件

Bus.js

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

創建兩個兄弟組建

C2.vue

<template>
    <view>
        <h1>c2</h1>
    </view>
</template>
<script>
// 引入Bus
import Bus from '@/util/Bus';
export default {
  // 在載入後的生命周期中
     mounted () {
            // 給bug綁定一個log事件,等待兄弟組件出發
        Bus.$on('log', content => {
          // 輸出兄弟組件傳遞的內容
            console.log(content)
        });
    }    
}
</script>

C1.vue

<template>
    <view>
        <button @tap="tapBus">c1</button>
    </view>
</template>
<script>
import Bus from '@/util/Bus';

export default {
    methods:{
        tapBus(){
      // 點擊按鈕觸發log事件，傳遞120過去，會輸出到控制台
            Bus.$emit('log', 120)
        }
    }
}
</script>

index.vue

<template>
    <view class="content">
    <!-- 在首頁顯示這兩個組件 -->
        <C1></C1>
        <C2></C2>
    </view>
</template>

<script>
// 引入組件
import C1 from '@/components/c1.vue';
import C2 from '@/components/c2.vue';
    export default {
    // 並註冊
        components:{
            C1,
            C2
        },
    }
</script>

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

將Bus註入到Vue的prototype上

main.js

// 將掛載到prototype單獨抽離成一個文件
import plugin from './util/Bus';
Vue.use(plugin);

./util/Bus.js

import Bus from 'vue';
let install = function (Vue) {
    // 設置eventBus
    Vue.prototype.bus = new Bus();
}

export default { install };

C2.vue

<template>
    <view>
        <h1>c2</h1>
    </view>
</template>
<script>
export default {
     mounted () {
    // 註冊事件
        this.bus.$on('updateData', (content)=>{
            console.log(content);
        });
    },
    // 註冊的匯流排事件要在組件銷毀時卸載，否則會多次掛載，造成觸發一次但多個響應的情況
    beforeDestroy () {
    this.bus.$off('updateData', (content)=>{
            console.log(content);
        });
  }
}
</script>

C1.vue

<template>
    <view>
        <button @tap="tapBus">c1</button>
    </view>
</template>
<script>
export default {
    methods:{
        tapBus(){
      // 觸發兄弟組件身上的事件，並傳一個object過去
            this.bus.$emit('updateData', {loading: false});
        }
    }
}
</script>

上述兩種方法已在uni-app項目中實踐過，參考文章中還有一種掛載在根結點的方法，但並不適配到小程式，所以沒有列出來

參考文章：https://www.cnblogs.com/fanlinqiang/p/7756566.html