vue組件間通信六種方式

vue組件間通信六種方式

組件之間的傳值通信
組件之間的通訊分為三種：父傳子、子傳父、兄弟之間的通訊；

1. props/$emit

   • 父傳子：主要是通過props來實作的
     • 具體實作：父組件通過import引入子組件并注冊，在子組件的標簽上添加要傳遞的屬性，子組件通過props接收，接收有兩種形式，一是通過陣列形式[‘要接收的屬性’]，二是通過物件形式{}來接收，物件形式可以設定要傳遞的資料和默認值，而陣列只是簡單的接收，
   • 子傳父：主要通過$emit來實作
     • 具體實作：子組件通過系結事件觸發函式，在其中設定this.$emit(‘要派發的自定義事件’，要傳遞的值)， $emit中有兩個引數一是要派發的自定義事件，第二個引數是要傳遞的值 然后父組件中,在這個子組件身上@派發的自定義事件,系結事件觸發的methods中的方法接受的 默認值,就是傳遞過來的引數

2. o n / on/ on/emit

   • 這種方法通過一個空的vue實體作為中央事件總線（事件中心），用它來觸發事件和監聽事件，巧妙而輕量地實作了任何組件間的通信，包括父子、兄弟、跨級，
   • 具體實作方式：
     

3. vuex

   • vuex就是一個倉庫，倉庫里放了很多物件，在state中存放資料源，當組件要更改state中的資料時，必須通過mutation進行，mutation儲存的是改變state中資料的操作方法，之后通過actions儲存的操作去觸發mutation中的方法，由組件中的$store.dispatch(‘action名稱’,data1)來觸發，然后由commit（）來觸發mutation的呼叫，間接更新state，

4. vuex+localStorage

   • vuex是vue的狀態管理器，存盤的資料是回應式的，但是并不會保存起來，重繪之后就回到了初始狀態，具體做法應該在vuex里資料改變的時候把資料拷貝一份到localStorage里面，重繪之后，如果localStorage里有保存的資料，取出來在替換store里的state.
   • 這里需要注意的是：由于vuex里，我們保存的狀態，都是陣列，而localStorage只支持字串，所以需要用JSON轉換，

5. a t t r s / attrs/ attrs/listeners

   • a t t r s : 包 含 了 父 作 用 域 中 不 作 為 p r o p 被 識 別 （ 且 獲 取 ） 的 a t t r i b u t e 綁 定 （ c l a s s 和 s t y l e 除 外 ） ， 并 且 可 以 通 過 v ? b i n d = ′ attrs:包含了父作用域中不作為prop被識別（且獲取）的attribute系結（class和style除外），并且可以通過v-bind=' attrs:包含了父作用域中不作為prop被識別（且獲取）的attribute綁定（class和style除外），并且可以通過v?bind=′attrs’傳入內部組件——在創建高級別的組件時非常有用，
   • l i s t e n e r s : 包 含 了 父 作 用 域 中 的 （ 不 含 . n a t i v e 修 飾 器 的 ） v ? o n 事 件 監 聽 器 ， 它 可 以 通 過 v ? o n = ′ listeners:包含了父作用域中的（不含.native修飾器的）v-on事件監聽器，它可以通過v-on=' listeners:包含了父作用域中的（不含.native修飾器的）v?on事件監聽器，它可以通過v?on=′listeners’傳入內部組件——在創建更高層次的組件時非常有用，

6. provide/inject

   • provide/inject:vue2.2.0新增API,以允許一個祖先組件向其所有子孫后代注入一個依賴，不管組件層次有多深，并在其上下游關系成立的時間里始終有效，
   • 總而言之：祖先組件中通過provider來提供變數，然后在子孫組件中通過inject來注入變數，
   • provide/inject API主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件間建立了一種主動提供與依賴注入的關系，
     
   • 需要注意的是：provide 和 inject 系結并不是可回應的，這是刻意為之的，然而，如果你傳入了一個可監聽的物件，那么其物件的屬性還是可回應的——vue官方檔案
     provide與inject 怎么實作資料回應式?
     使用2.6最新API Vue.observable 優化回應式 provide(推薦)，
   • 我們來看個例子：孫組件D、E和F獲取A組件傳遞過來的color值，并能實作資料回應式變化，即A組件的color變化后，組件D、E、F會跟著變（核心代碼如下：）
   • 

7. p a r e n t s / parents/ parents/children與ref

   • ref:如果在普通的DOM元素上使用，參考指向就是DOM元素；如果用在子組件上，參考就指向組件實體
   • p a r e n t s / parents/ parents/children：訪問父/子實體
   • 需要注意的是：這兩種都是直接得到組件實體，使用后可以直接呼叫組件的方法或訪問資料，
   • $parents：訪問父實體，如果當前實體有的話，
   • c h i l d r e n : 當 前 實 例 的 直 接 子 組 件 ， 需 要 注 意 children:當前實體的直接子組件，需要注意 children:當前實例的直接子組件，需要注意children并不保證順序，也不是回應式的，如果你發現自己正在嘗試使用$children來進行資料系結，考慮使用一個陣列配合v-for來生成子組件，并且使用Array作為真正的來源，
   • 這兩種方法的弊端是，無法在跨級或兄弟間通信，
   • 
     原文參考： https://segmentfault.com/a/1190000019208626