vue组件通信

1. 父子组件通信

1. 基本方法（推荐）：
   a. 父 => 子：使用prop向子组件传递静态或动态的数据，如：，注意传递的数据需要在子组件用props属性接收。
   b. 子 => 父：使用 v-on:event 和 $emit。父组件使用 v-on 或 @ 向子组件传递事件，再在子组件中调用 $emit 触发事件即可，注意传递的事件不需要在子组件的props中接收。
2. 父子组件链（不推荐）：
   a. 父 => 子：使用 this.$children 访问或递归访问其子孙组件。
   b. 子 => 父：使用 this.$parent 访问或递归访问其父级组件，直至根组件。
3. 子组件索引：
   a. 父 => 子：用 ref 属性为子组件指定一个索引名称，在父组件中通过 this.$ref[name] 访问ref为name的子组件。

2. 爷孙组件通信

1. 父子嵌套：
   a. 使用嵌套的父子通信进行层级传递即可。
2. 依赖注入：
   a. 父级组件定义 provide 函数返回提供的数据，子孙后代组件使用 inject 属性接收上层组件provide的数据。

3. 任意组件通信

1. 事件总线eventBus：
   1. let bus = new Vue(); Vue.prototype.bus = bus创建一个空的Vue实例，挂载到Vue原型上作为中央事件总线；
   2. 在需要传值的组件中使用 this.bus.$emit('event', data) 触发一个自定义事件，并传递数据；
   3. 在需要接收数据的组件中使用 this.bus.$on('event', data => { }) 监听自定义事件，并在回调函数中处理传递过来的数据。
2. 使用vuex
   1. 创建一个全局state管理的 store；
   2. 组件中使用 this.$store.state 访问 state；
   3. 组件中使用 commit mutation 或者 dispatch action 来更新store里的数据。