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项目中实践过，参考文章中还有一种挂载在根结点的方法，但并不适配到小程序，所以没有列出来