Bus的用途的个人理解

从用vue开始，在我理解里，貌似组件通信只要有vuex就可以，Bus可有可无。但最近的项目里碰到一种场景，觉得有一个场景比较适合，那就是子组件间的主动通信。

应用场景：假设组件A里状态改变后想用到组件B的方法获取数据，通常方法是this.$parent.B.fn。但是如果是A想触发B组件里面又里面又·····呢，那得写多多少个this.$parent.B·····n。

解决：使用Bus。

1.新建一个bus.js文件，new一个vue当作bus传输中间站，并导出。

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

//utils - bus.js

2.在n组件里导入bus并绑定事件

<template>
    ...
</template>
<script>
    import bus from '@/utils/bus'
    export default {
        created(){
            bus.$on('message', function(msg){console.log(msg)}); //message为事件名称,function为需要执行得函数
        }
    }
</script>

//n.vue

3.A组件主动触发n组件得bus事件，触发方法。

<template>
    ...
</template>
<script>
    import bus from '@/utils/bus'
    export default {
        mounted(){
            bus.$emit('message', 'hello'); //message为事件名称
        }
    }
</script>

//A.vue