记一次爷孙组件隔代组件的通信之$emit与$on

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

首先新建eventBus.js

import Vue from 'vue'
const eventBus = new Vue()
export default {
    install(target, options) {
        target.prototype.$eventBus = eventBus
    }
}

再全局注册

import eventBus from './utils/eventBus'
Vue.use(eventBus);

A组件>B组件>C组件

例子：A组件中打开B组件，再从B组件打开C组件，然后C组件中方法触发A组件中的某条数据更新

// A
<button @click="showDialogB"></button>
<component-b :isVisible.sync="isShow"></component-b>

created() {
    this.$eventBus.$on('updateAccount', (data) => {
        console.log('bus')
        this.customerAccountLoad()
    })
},
methods:{
    showDialogB() {
        this.isShow = true
    },
}

// B
<button @click="showDialogC"></button>
<component-c :isVisible.sync="isShow"></component-c>
methods:{
    showDialogC() {
        this.isShow = true
    },
}

// C
<button @click="update"></button>
update() {
    this.$eventBus.$emit('updateAccount',data)
}

$on监听了自定义事件 updateAccount ，因为有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听。
这样就实现了A组件中的数据更新，不用一层一层往上传递。

更多通信方法: https://segmentfault.com/a/1190000019208626