1. props/$emit
- 父組件向子組件傳值:父組件通過props向下傳遞數(shù)據(jù)給子組件
- 子組件向父組件傳值（通過自定義事件形式）：子組件通過events給父組件發(fā)送消息匿又，實(shí)際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。
2. 中央事件總線（事件中心）
這種方法通過一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心）建蹄，用它來觸發(fā)事件和監(jiān)聽事件,巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信碌更，包括父子、兄弟洞慎、跨級痛单。當(dāng)我們的項(xiàng)目比較大時(shí)，可以選擇更好的狀態(tài)管理解決方案vuex劲腿。
具體實(shí)現(xiàn)方法：
var Event=new Vue();
Event.$emit(事件名,數(shù)據(jù));
Event.$on(事件名,data => {});
3. vuex
Vuex實(shí)現(xiàn)了一個(gè)單向數(shù)據(jù)流，在全局擁有一個(gè)State存放數(shù)據(jù)，當(dāng)組件要更改State中的數(shù)據(jù)時(shí)挥吵，必須通過Mutation進(jìn)行重父，Mutation同時(shí)提供了訂閱者模式供外部插件調(diào)用獲取State數(shù)據(jù)的更新。而當(dāng)所有異步操作(常見于調(diào)用后端接口異步獲取更新數(shù)據(jù))或批量的同步操作需要走Action蔫劣，但Action也是無法直接修改State的坪郭，還是需要通過Mutation來修改State的數(shù)據(jù)。最后脉幢，根據(jù)State的變化歪沃，渲染到視圖上。
各模塊在流程中的功能
- Vue Components：Vue組件嫌松。HTML頁面上沪曙，負(fù)責(zé)接收用戶操作等交互行為，執(zhí)行dispatch方法觸發(fā)對應(yīng)action進(jìn)行回應(yīng)萎羔。
- dispatch：操作行為觸發(fā)方法液走，是唯一能執(zhí)行action的方法。
- actions：操作行為處理模塊,由組件中的$store.dispatch('action 名稱', data1)來觸發(fā)贾陷。然后由commit()來觸發(fā)mutation的調(diào)用 , 間接更新 state缘眶。負(fù)責(zé)處理Vue Components接收到的所有交互行為。包含同步/異步操作髓废，支持多個(gè)同名方法巷懈，按照注冊的順序依次觸發(fā)。向后臺API請求的操作就在這個(gè)模塊中進(jìn)行慌洪，包括觸發(fā)其他action以及提交mutation的操作顶燕。該模塊提供了Promise的封裝，以支持action的鏈?zhǔn)接|發(fā)冈爹。
- commit：狀態(tài)改變提交操作方法涌攻。對mutation進(jìn)行提交，是唯一能執(zhí)行mutation的方法频伤。
- mutations：狀態(tài)改變操作方法恳谎，由actions中的commit('mutation 名稱')來觸發(fā)。是Vuex修改state的唯一推薦方法憋肖。該方法只能進(jìn)行同步操作因痛，且方法名只能全局唯一。操作之中會有一些hook暴露出來瞬哼，以進(jìn)行state的監(jiān)控等婚肆。
- state：頁面狀態(tài)管理容器對象租副。集中存儲Vue components中data對象的零散數(shù)據(jù)坐慰，全局唯一，以進(jìn)行統(tǒng)一的狀態(tài)管理。頁面顯示所需的數(shù)據(jù)從該對象中進(jìn)行讀取结胀，利用Vue的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新赞咙。
- getters：state對象讀取方法。圖中沒有單獨(dú)列出該模塊糟港，應(yīng)該被包含在了render中攀操，Vue Components通過該方法讀取全局state對象。
Vuex與localStorage
vuex 是 vue 的狀態(tài)管理器秸抚，存儲的數(shù)據(jù)是響應(yīng)式的速和。但是并不會保存起來，刷新之后就回到了初始狀態(tài)剥汤，具體做法應(yīng)該在vuex里數(shù)據(jù)改變的時(shí)候把數(shù)據(jù)拷貝一份保存到localStorage里面颠放，刷新之后，如果localStorage里有保存的數(shù)據(jù)吭敢，取出來再替換store里的state碰凶。（由于vuex里，我們保存的狀態(tài)鹿驼，都是數(shù)組欲低，而localStorage只支持字符串，所以需要用JSON轉(zhuǎn)換）
4. attrs 與 listeners（應(yīng)有$）
多級組件嵌套需要傳遞數(shù)據(jù)時(shí)畜晰，通常使用的方法是通過vuex砾莱。但如果僅僅是傳遞數(shù)據(jù)，而不做中間處理舷蟀，使用 vuex 處理恤磷，未免有點(diǎn)大材小用。為此Vue2.4 版本提供了另一種方法:$attrs/$listeners
-
$attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 (class 和 style 除外)野宜。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)扫步，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件匈子。通常配合 interitAttrs 選項(xiàng)一起使用河胎。 -
$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件
$attrs與$listeners是兩個(gè)對象虎敦，$attrs 里存放的是父組件中綁定的非 Props 屬性游岳，$listeners里存放的是父組件中綁定的非原生事件。
5. provide/inject
祖先組件中通過provider來提供變量其徙，然后在子孫組件中通過inject來注入變量胚迫。
主要解決了跨級組件間的通信問題，不過它的使用場景唾那，主要是子組件獲取上級組件的狀態(tài)访锻，跨級組件間建立了一種主動提供與依賴注入的關(guān)系。
祖先組件中通過provider來提供變量，然后在子孫組件中通過inject來注入變量期犬。
provide 和 inject 主要為高階插件/組件庫提供用例河哑。
6. parent / $children與 ref
- ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素龟虎；如果用在子組件上璃谨，引用就指向組件實(shí)例
-
$parent / $children：訪問父 / 子實(shí)例
本文不適于Vue3.0，內(nèi)容參考了vue組件間通信六種方式鲤妥。
