前言

Vue採用的是元件化思想，那麼這些元件間是如何通訊的呢？下面詳細介紹一下。

所謂元件間通訊，不單單是我們字面上理解的相互傳遞資料，這裡還包括一個元件訪問另一個元件的例項方法等，如父元件通過ref訪問子元件例項成員，並實現傳參。我們先來研究父子元件間是如何通訊的。

一、父子元件通訊

1.props實現父元件向子元件傳遞資料

父元件：

子元件：

2.$emit實現子元件向父元件傳遞資料

父元件：

子元件：

3.父元件通過ref訪問子元件例項成員，並實現傳參

父元件：

子元件：

總結一下，如果是資料傳遞的話：

父->子: props；子->父: $emit

父元件通過ref訪問子元件例項成員，並實現傳參

二、兄弟元件間傳遞

什麼是兄弟元件，也就是一個父元件下的多個子元件，他們之間如何實現資料傳遞呢？

1：通過父元件中介，進行資料傳遞

父元件:

子元件A:

子元件B:

2: 通過$parent訪問父元件資料

父元件:

子元件A:

子元件B:

注意：A元件通過$emit傳過來的值，在父元件定義後可以直接使用

3.匯流排模式(bus): 監聽與訂閱(事件)

1.在main.js新增vue型別原型屬性,使得所有vue例項(元件)都可以通過this來訪問bus物件

2.誰呼叫誰就觸發事件，將值往下傳，下面的子子孫孫都可以通過$on接收

3.子元件監聽Vue上的bus物件after-change，實現接收

三、陌生元件間資料傳遞

方案1：通過$root獲取根元件例項

方案2：通過在Vue.prototype新增響應式物件

結尾

以上就是常用的元件通訊方法，不過日常開發還是Vuex用的多一點，Vuex真正實現了共享資料，但這並不意味著Vuex就天下無敵了，要實現元件封裝還是要用基本的方法來實現。