this is an easy way for vue to communicate components data.

install

npm install -S vue-bus-event

useage

ComponentA.vue

    import { handleEmit } from 'vue-bus-event'
    export default {
        data () {
            return {
                test: 'hehehe'
            }
        },
        created () {
            handleEmit.call(this)
        }
    }

ComponentB.vue

    import { emitEvent } from 'vue-bus-event'
    export default {
        methods: {
            sendMsg () {
                emitEvent({key: 'test', value: 'hahaha'})
            }
        }    
    }

sendMsg method will change ComponentA.vue file.

make data test from hehehe change to hahaha

the key can be 'test.abc.ddd' and the depth is no more than 3.

it also can be implemented by the bus.

ps:

ComponentA.vue

    import { bus } from 'vue-bus-event'
    export default {
        data () {
            return {
                test: 'hehehe'
            }
        },
        created () {
            bus.$on('component-communicate', ({key, value}) => {
                this[key] = value
            })
        }
    }

ComponentB.vue

    import { bus } from 'vue-bus-event'
    export default {
        methods: {
            sendMsg () {
                bus.$emit('component-communicate', {key: 'test', value: 'hahaha'})
            }
        }
    }