轉載聲明：本文選自【 掘金-浪裡行舟:
vue元件間通信六種方式(完整版)】
前言
元件是 vue.js最強大的功能之一，而元件執行個體的作用域是互相獨立的，這就意味着不同元件之間的資料無法互相引用。一般來說，元件可以有以下幾種關系：
如上圖所示，A 和 B、B 和 C、B 和 D 都是父子關系，C 和 D 是兄弟關系，A 和 C 是隔代關系(可能隔多代)。
針對不同的使用場景，如何選擇行之有效的通信方式？這是我們所要探讨的主題。本文總結了vue元件間通信的幾種方式，如props、
$emit
/
$on
、vuex、
$parent
/
$children
、
$attrs
/
$listeners
和provide/inject，以通俗易懂的執行個體講述這其中的差别及使用場景，希望對小夥伴有些許幫助。
本文的代碼請猛戳github部落格，紙上得來終覺淺，大家動手多敲敲代碼！
方法一、 props
$emit
props
$emit
父元件A通過props的方式向子元件B傳遞，B to A 通過在 B 元件中 $emit, A 元件中 v-on 的方式實作。
1.父元件向子元件傳值
接下來我們通過一個例子，說明父元件如何向子元件傳遞值：在子元件Users.vue中如何擷取父元件App.vue中的資料
users:["Henry","Bucky","Emily"]
"app">"users">//前者自定義名稱便于子元件調用，後者要傳遞資料名
總結：父元件通過props向下傳遞資料給子元件。注：元件中的資料共有三種形式：data、props、computed
2.子元件向父元件傳值(通過事件形式)
接下來我們通過一個例子，說明子元件如何向父元件傳遞值：當我們點選“Vue.js Demo”後，子元件向父元件傳遞值，文字由原來的“傳遞的是一個值”變成“子向父元件傳值”，實作子元件向父元件值的傳遞。
"changeTitle">{{title}}
"changeTitle">{{title}}
//綁定一個點選事件
"app">"updateTitle" >//與子元件titleChanged自定義事件保持一緻
// updateTitle($event)接受傳遞過來的文字
{{title}}
{{title}}
總結：子元件通過events給父元件發送消息，實際上就是子元件把自己的資料發送到父元件。
方法二、 $emit
$on
$emit
$on
這種方法通過一個空的Vue執行個體作為中央事件總線(事件中心)，用它來觸發事件和監聽事件,巧妙而輕量地實作了任何元件間的通信，包括父子、兄弟、跨級。當我們的項目比較大時，可以選擇更好的狀态管了解決方案vuex。
1.具體實作方式：
2.舉個例子
假設兄弟元件有三個，分别是A、B、C元件，C元件如何擷取A或者B元件的資料
"itany">-a>-a>
"a">
A元件：{{name}}
A元件：{{name}}
"send">将資料發送給C元件
"b">
B元件：{{age}}
B元件：{{age}}
"send">将數組發送給C元件
"c">
C元件：{{name}}，{{age}}
C元件：{{name}}，{{age}}
$on
監聽了自定義事件 data-a和data-b，因為有時不确定何時會觸發事件，一般會在 mounted 或 created 鈎子中來監聽。
方法三、vuex
1.簡要介紹Vuex原理
Vuex實作了一個單向資料流，在全局擁有一個State存放資料，當元件要更改State中的資料時，必須通過Mutation進行，Mutation同時提供了訂閱者模式供外部插件調用擷取State資料的更新。而當所有異步操作(常見于調用後端接口異步擷取更新資料)或批量的同步操作需要走Action，但Action也是無法直接修改State的，還是需要通過Mutation來修改State的資料。最後，根據State的變化，渲染到視圖上。
2.簡要介紹各子產品在流程中的功能：
- Vue Components：Vue元件。HTML頁面上，負責接收使用者操作等互動行為，執行dispatch方法觸發對應action進行回應。
- dispatch：操作行為觸發方法，是唯一能執行action的方法。
- actions：操作行為處理子產品,由元件中的
$store.dispatch('action 名稱', data1)
- commit：狀态改變送出操作方法。對mutation進行送出，是唯一能執行mutation的方法。
- mutations：狀态改變操作方法，由actions中的
commit('mutation 名稱')
- state：頁面狀态管理容器對象。集中存儲Vue components中data對象的零散資料，全局唯一，以進行統一的狀态管理。頁面顯示所需的資料從該對象中進行讀取，利用Vue的細粒度資料響應機制來進行高效的狀态更新。
- getters：state對象讀取方法。圖中沒有單獨列出該子產品，應該被包含在了render中，Vue Components通過該方法讀取全局state對象。
3.Vuex與localStorage
vuex 是 vue 的狀态管理器，存儲的資料是響應式的。但是并不會儲存起來，重新整理之後就回到了初始狀态，具體做法應該在vuex裡資料改變的時候把資料拷貝一份儲存到localStorage裡面，重新整理之後，如果localStorage裡有儲存的資料，取出來再替換store裡的state。
let defaultCity =
這裡需要注意的是：由于vuex裡，我們儲存的狀态，都是數組，而localStorage隻支援字元串，是以需要用JSON轉換：
方法四、 $attrs
$listeners
$attrs
$listeners
1.簡介
多級元件嵌套需要傳遞資料時，通常使用的方法是通過vuex。但如果僅僅是傳遞資料，而不做中間處理，使用 vuex 處理，未免有點大材小用。為此Vue2.4 版本提供了另一種方法----
$attrs
/
$listeners
-
$attrs
-
$listeners
接下來我們看個跨級通信的例子：
浪裡行舟
浪裡行舟
:foo="foo"
:boo="boo"
:coo="coo"
:doo="doo"
title="前端工匠"
>
// childCom1.vue
"border">
foo: {{ foo }}
childCom1的$attrs: {{ $attrs }}
"$attrs">
"border">
boo: {{ boo }}
childCom2: {{ $attrs }}
"$attrs">
"border">
childCom3: {{ $attrs }}
如上圖所示
$attrs
表示沒有繼承資料的對象，格式為{屬性名：屬性值}。Vue2.4提供了
$attrs
,
$listeners
來傳遞資料與事件，跨級元件之間的通訊變得更簡單。
簡單來說：
$attrs
與
$listeners
是兩個對象，
$attrs
裡存放的是父元件中綁定的非 Props 屬性，
$listeners
裡存放的是父元件中綁定的非原生事件。
方法五、provide/inject
1.簡介
Vue2.2.0新增API,這對選項需要一起使用，以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，并在起上下遊關系成立的時間裡始終生效。一言而蔽之：祖先元件中通過provider來提供變量，然後在子孫元件中通過inject來注入變量。provide / inject API 主要解決了跨級元件間的通信問題，不過它的使用場景，主要是子元件擷取上級元件的狀态，跨級元件間建立了一種主動提供與依賴注入的關系。
2.舉個例子
假設有兩個元件： A.vue 和 B.vue，B 是 A 的子元件
可以看到，在 A.vue 裡，我們設定了一個 provide: name，值為 浪裡行舟，它的作用就是将 name 這個變量提供給它的所有子元件。而在 B.vue 中，通過
inject
注入了從 A 元件中提供的 name 變量，那麼在元件 B 中，就可以直接通過 this.name 通路這個變量了，它的值也是 浪裡行舟。這就是 provide / inject API 最核心的用法。
需要注意的是：provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那麼其對象的屬性還是可響應的----vue官方文檔 是以，上面 A.vue 的 name 如果改變了，B.vue 的 this.name 是不會改變的，仍然是 浪裡行舟。
3.provide與inject 怎麼實作資料響應式
一般來說，有兩種辦法：
- provide祖先元件的執行個體，然後在子孫元件中注入依賴，這樣就可以在子孫元件中直接修改祖先元件的執行個體的屬性，不過這種方法有個缺點就是這個執行個體上挂載很多沒有必要的東西比如props，methods
- 使用2.6最新API Vue.observable 優化響應式 provide(推薦)
我們來看個例子：孫元件D、E和F擷取A元件傳遞過來的color值，并能實作資料響應式變化，即A元件的color變化後，元件D、E、F不會跟着變(核心代碼如下：)
// A 元件