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項目中實踐過，參考文章中還有一種掛載在根結點的方法，但並不適配到小程序，所以沒有列出來