Vue2中兄弟组件的传值

1.为什么要有事件总线

在vue中非常常见的有父子组件通信和兄弟组件通信，而兄弟组件的通信就需要用到了事件总线(EventBus)，将总线作为一个中间的桥梁进行通信

2.EventBus的使用步骤

因为在Vue实例的原型链上有着$emit,$on这些方法,所有我们可以借助Vue的实例作为通信的中间桥梁

a. 创建一个Vue的实例对象(new Vue())，并绑定到Vue的原型链上，这样在任意组件中都可以调用

b.在数据发送方，调用$emit('事件名称',要发送的数据)方法触发自定义事件

c.在数据接收方，调用$on("事件名称",事件处理函数)方法注册一个自定义事件

// 在Vue原型链上绑定一个$bus的事件总线

Vue.prototype.$bus = new Vue();

数据发送方

// 以在Vue组件中为例

export default{
    data(){
        return{
            msg: "hello,vue.js"
        }
    },
    methods: {
        // 在方法中发送数据
        sendMsg(){
            this.$bus.$emit("share",this.msg);
        }
    }   
}

数据接收方:

export default{
    data(){
        return {
            msgFrom: ""
        }
    },
    created(){
        // 回调函数也可以抽出来写成一个方法在methods 里面
        this.$bus.$on("share",val => {
           this.msgFrom = val
        })
    },
}

移除绑定的事件

export default{
    data(){
        return {
            msgFrom: ""
        }
    },
    created(){
        // 这里把回调函数放在methods里面
        this.$bus.$on("share",this.myShare)
    },
    methods: {
        myShare(val){
           this.msgFrom = val;
        }
    },
    destroyed(){
        this.$bus.$off("share"); // 移除指定这个事件
        this.$bus.$off();  // 移除所有事件
    }
}