详解Vue组件通信

父子组件的通信是开发是最常用的也是最重要的

二级标题你们一定知道父子通信是用prop传递数据的

父组件

子组件

---

子组件向父组件

父组件

子组件

---

同级组件通信

1. 需要有一辆通信车 eventBus

中央事件总线的方式: 新建一个Vue事件bus对象，然后通过bus.on监听触发的事件。

/lib/bus.js

import Vue from 'vue';
export default new Vue;

main.js

import eventBus from './lib/bus'
Vue.prototype.$eventBus = eventBus;

发送信息的一方

接收信息的一方

---

深层组件嵌套祖先与子组件通信(listener)

Vue 2.4开始提供了: listener

祖先组件

第一层组件嵌套

第二层组件嵌套

第三层组件嵌套

---

5. provide与inject

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据
只要在父组件的生命周期内，子组件都可以调用

父组件

子组件

---

6. children

父组件

子组件

7. vuex