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

来源：https://www.cnblogs.com/rope/p/12330490.html

标签

vue

content