Vue 組件間通信主要指以下 3 類通信：父子組件通信、隔代組件通信、兄弟組件通信

1.props / $emit 適用 父子組件通信

props是父組件將值傳給子組件，$emit是子組件通過派發(fā)事件的方式將值傳給父組件

2.ref 與 $parent / $children 適用 父子組件通信

1）ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例

2）$parent / $children ：訪問父、子實實例，需要注意的是：
children是一個數(shù)組，因為子組件可能有多個，通過parent和$children可以直接修改父子組件的data

Parent.vue

<Child />
<Child />
<Child />
{
   data(){
     return {
       parentMsg:'parent'
     }
   },
  mounted(){
   this.$children[0].childMsg = 'changed'
  }
}

Child

{
   data(){
     return {
       childMsg:'child'
     }
   },
   mounted(){
     this.$parent.parentMsg = 'changed'
   }
}

3.EventBus ($emit/$on) 適用于 父子、隔代、兄弟組件通信

這種方法通過一個空的 Vue 實例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件，從而實現(xiàn)任何組件間的通信，包括父子、隔代、兄弟組件：

使用EventBus我們需要實例化一個空的不具備DOM的Vue，為方便使用，可以把其掛在項目將實例的Vue的原型上

main.js

Vue.prototype.$EventBus = new Vue()

CompnentA

{
   methods:{
     testA(){
       this.$EventBus.$emit('cmaFunction',params)
     }
   }
}

ComponentB

{
   mounted(){
     this.$EventBus.$on('cmaFunction',(params)=>{
       console.log(params)
     })
   }
}

4.$attrs/$listeners 適用于 隔代組件通信

• attr包含了父作用域中不作為prop被識別(且獲取)的特性綁定(class和style除外),并且可以通過v?bind="
  attrs"繼續(xù)向下傳遞,通常配合 inheritAttrs 選項一起使用(inheritAttrs=true的時候，傳遞的屬性會加到子組件的根元素上)

例如：
Parent.vue

<Child name="jack" age="18" weight="135">

Child.vue

/可以將$attrs繼續(xù)傳向后代組件
<GrandSon v-bind="$attrs">

{
   props:['weight'],
   mounted(){
   //這里'weight'已經(jīng)被作為props識別了，所以￥attrs上不再包含weight屬性
     console.log(this.$attrs) // {name:'jack',age:'18'}
   }
}

GrandSon.vue

{
   mounted(){
     console.log(this.$attrs)  //{name:'jack',age:'18'}
   }
}

• listeners：包含了父作用域中的(不含.native修飾器的)v?on事件監(jiān)聽器。它可以通過v?on="
  listeners" 傳入內(nèi)部組件

例如：
Parent.vue

<Child v-on:click="myClick">

Child.vue

//可以將$attrs繼續(xù)傳向后代組件
<GrandSon v-bind="$listeners">

{
   mounted(){
     console.log(this.$listeners) // {name:'jack',age:'18'}
   }
}

GrandSon.vue

{
   mounted(){
     console.log(this.$listeners)  //{name:'jack',age:'18'}
   }
}

5.provide / inject 適用于 隔代組件通信

祖先組件中通過 provider 來提供變量，然后在子孫組件中通過 inject 來注入變量。 provide / inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態(tài)，跨級組件間建立了一種主動提供與依賴注入的關系。

Parent.vue

{
    provide:{
        foo:'bar'
    }
}

GrandSon.vue

{
    inject:['foo'],
    mounted(){
        console.log(this.foo) // bar
    }
}

6.Vuex 適用于 父子、隔代、兄弟組件通信

Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。每一個 Vuex 應用的核心就是 store（倉庫）?！皊tore” 基本上就是一個容器，它包含著你的應用中大部分的狀態(tài) ( state )。

• Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。每一個 Vuex 應用的核心就是 store（倉庫）?！皊tore” 基本上就是一個容器，它包含著你的應用中大部分的狀態(tài) ( state )。

• 改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化

vuex主要包括以下幾個模塊：

• State：定義了應用狀態(tài)的數(shù)據(jù)結構，可以在這里設置默認的初始狀態(tài)。
• Getter：允許組件從 Store 中獲取數(shù)據(jù)，mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性。
• Mutation：是唯一更改 store 中狀態(tài)的方法，且必須是同步函數(shù)。
• Action：用于提交 mutation，而不是直接變更狀態(tài)，可以包含任意異步操作
• Module：允許將單一的 Store 拆分為多個 store 且同時保存在單一的狀態(tài)樹中。