元件通訊的8種方式，你搞清楚了嗎？_東東吖

本文已參與「掘力星計劃」，贏取創作大禮包，挑戰創作激勵。

我們都知道vue是元件化開發思想，所以元件通訊就是vue的基本功，在講元件通訊之前，我們先來回答幾個問題，驗證一下你在日常的工作中是否具備元件化開發思想。

1.父元件如何向子元件傳值？

2.子元件如何向父元件傳值？

3.任意元件之間如何傳值？

4.父元件如何呼叫子元件裡面的方法？

5.子元件如何呼叫父元件裡面的方法？

6.任意元件之間如何呼叫元件裡面的方法？

驗證方式：

①如果每個問題你都能至少回答出一種方式，說明你在日常的開發工作中，基本具備了元件化開發思想。

②如果每個問題你能回答出多種方式，並能說出每種方式的的優缺點，說明你完全具備了元件化開發思想。

③如果你部分問題回答不上來，或者模糊不清，那說明你在日常工作中欠缺元件化開發思想。

我知道有的人一定不服！東東吖，你怎麼就能通過這幾個問題來判斷我是否具備元件化開發思想呢?

別急，這麼說吧，我說的元件化開發思想不是簡單的從UI框架上覆制程式碼全部堆在一個檔案哦，雖然那也是一個元件，但我並不認為那是真正的元件化開發思想，如果你非要說那就是元件化開發，那打擾了！！！

元件分為頁面級元件、專案公共元件、模組公共元件，甚至可以封裝成button級別的元件。

如果你在日常的開發中具備元件化開發思想，那麼你一定會遇到上面6個問題。

先來看這張圖，大家都經常看需求文件，這張圖不需要我講解了吧。

下面，我將來回答上面的6個問題，也是我自己最常用的方式。

1.父元件如何向子元件傳值？

父元件通過props向父元件傳值。

前置條件：index代表父元件，Children代表子元件。

父如何傳？

父元件裡面的data定義了一條資料msg，通過熟悉msg傳給子元件。=前面的屬性是傳給子元件的，=後面的值是data裡面引用過來的。

子如何接收？

子元件通過props接收父元件傳過來的值，用法和在data裡面一樣，在temple裡面直接可以{{}}，在方法直接用this.屬性。

效果：

2.子元件如何向父元件傳值？

子元件通過$emit觸發自定義事件。

子如何傳？

子元件通過$emit觸發定義在父元件裡面的自定義事件，他可以傳兩個值，第一個是自定義事件名，第二個是要傳遞的值。

父如何接收？

父元件在自定義的事件裡面就可以接收到子元件傳過來的值，並把他賦值給data裡面，渲染到頁面上。

效果：

3.任意元件傳值？

任意元件傳值通過中央事件匯流排$bus

前置條件：AA元件叫A元件，BB元件叫B元件，雖然這裡是兄弟關係，其實A元件和B元件之間沒有任何關係也可以用這種方式。

定義中央事件匯流排，掛載到vue例項上。

A元件如何傳送？

通過this.$bus.$emit傳送

B元件如何接收？

通過this.$bus.$on接收

父元件調子元件裡面的方法？

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件例項，可以通過例項直接呼叫元件的方法或訪問資料通過ref繫結元件，通過this.$refs.元件名.方法名,呼叫子元件裡面的方法

父元件：

子元件：

效果：

子元件呼叫父元件的方法？

子傳父其實幹了兩件事：第一：把這個事件踢給父元件，第二：把資料傳給父元件。第一個引數對應事件，第二個引數對應資料，第二個引數可以不傳。

子元件：

父元件：

效果：

然而，元件通訊遠遠不止這些，上面的6個場景僅僅用到了如下3種方式：

一：`props`/`$emit`(父傳子，子傳父，子調父)

二：`$bus`（任意元件傳值，任意元件調方法）

三：`ref/resf`（父調子）

下面我將來講元件通訊剩餘的5種方式。

四：`$parent`/ `$children`

來看看官方介紹，其實你知道了上面的三種方式，這種是不需要掌握的，官方也不推薦用。但是我們還是瞭解哈唄。

1.父傳子？

我們在子元件裡面列印一下$parent

開啟控制檯發現這是元件例項，這說明什麼，這說明這可以訪問元件上的所有屬性和方法，我們可以看見我子元件的msg.

在A元件裡使用子元件，觸發這個事件，列印的就是A元件實列。

為了效能優化，建議同學們使用這種方法

2.子傳父？ 我們列印父元件裡面列印一下$children

開啟控制檯

這剛好和我們在父元件裡面使用子元件的順序一致。

我們開啟其中一個子元件看一下

比如我們要使用第三個子元件AA裡面的屬性。

開啟控制檯,驗證一下。

五：`provide`/`reject`

這對選項需要一起使用，以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，並在其上下游關係成立的時間裡始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

提示：provide 和 inject 繫結並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的物件，那麼其物件的 property 還是可響應的

父元件index裡面有子元件A,在子元件裡面有孫元件c

在父元件index裡面：

在子元件A裡面：

在孫元件C裡面：

頁面效果：

六：`Vuex`

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

Vuex各個模組:\ state：用於資料的儲存，是store中的唯一資料來源\ getters：如vue中的計算屬性一樣，基於state資料的二次包裝，常用於資料的篩選和多個數據的相關性計算\ mutations：類似函式，改變state資料的唯一途徑，且不能用於處理非同步事件\ actions：類似於mutation，用於提交mutation來改變狀態，而不直接變更狀態，可以包含任意非同步操作\ modules：類似於名稱空間，用於專案中將各個模組的狀態分開定義和操作，便於維護\

vueX其實這塊的內容比較多，一時半會兒講不完，也講不清楚，咱們下次單獨講。這次就先敷衍敷衍你們，諒解一下，哈哈哈哈。

在main.js裡面註冊vuex

在storex下的index裡面。

此時資料處於共享狀態，在任意一個頁面都可以直接訪問：

七：`localStorage`/`sessionStorage`

本地儲存也非常簡單，沒有什麼好講的，他常搭配vuex管理一些專案公共基礎資料，這塊我就簡單給大家分享幾種寫法吧，廢話少說，直接看圖。

儲存字串:

寫法介紹：

開啟本地儲存：

開啟控制檯：

以上方法只能儲存字串，不能儲存物件，要儲存物件，要用JSON.stringify()進行轉換成字串。取要用JSON.parse進行還原成物件。

儲存陣列物件：

寫法介紹：

開啟本地儲存：

開啟控制檯：

八：`$attrs`/`$listeners`

$attrs:包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 繫結 (class 和 style 除外)。當一個元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部元件——在建立高級別的元件時非常有用。

父元件

子元件：

inheritAttrs:預設情況下父作用域的不被認作 props 的 attribute 繫結 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應用在子元件的根元素上。當撰寫包裹一個目標元素或另一個元件的元件時，這可能不會總是符合預期行為。通過設定 inheritAttrs 到 false，這些預設行為將會被去掉。而通過 (同樣是 2.4 新增的) 例項 property $attrs 可以讓這些 attribute 生效，且可以通過 v-bind 顯性的繫結到非根元素上。

注意：這個選項不影響 class 和 style 繫結。

孫元件：

頁面效果：

$listeners:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部元件——在建立更高層次的元件時非常有用。

父元件：

子元件：

孫元件：

開啟控制檯檢視結果：

總結：