Vue-兄弟组件之间的数据共享

兄弟组件之间的数据共享
在vue2.x中，兄弟组件之间数据共享的方案是EventBus

EventBus的使用步骤
1、创建eventBus.js模块，并向外共享一个Vue的实例对象
2、在数据发送方，调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
3、在数据的接受方，调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件

兄弟组件A-数据发送方
import bus from './eventBus.js'

export default{
    data(){
        return {
            msg: 'hello vue.js'
        }
    },
    methods: {
        sendMsg(){
            bus.$emit('msgchange', this.msg)
        }
    }
}

//eventBus.js
//向外共享Vue的实例对象

import Vue from 'vue'

export default new Vue()

兄弟组件B-数据接受方

<Son @msgchange="getNewMsg"></Son>

import bus from './eventBus.js'

export default{
    data(){
        return {
            msgFromBrother: ''
        }
    },
    created(){
        bus.$on('getNewMsg', val => {
            this.msgFromBrother = val
        })
    }
}