日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
vue組件間通信六種方式（完整版）

【稿件】

10年積累的網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先做網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有內(nèi)鄉(xiāng)免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

前言

組件是 vue.js強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系：

如上圖所示，A 和 B、B 和 C、B 和 D 都是父子關(guān)系，C 和 D 是兄弟關(guān)系，A 和 C 是隔代關(guān)系（可能隔多代）。

針對不同的使用場景，如何選擇行之有效的通信方式？這是我們所要探討的主題。本文總結(jié)了vue組件間通信的幾種方式，如props、$emit/$on、vuex、$parent/$children、$attrs/$listeners和provide/inject，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。

本文的代碼請猛戳github博客，紙上得來終覺淺，大家動手多敲敲代碼！

方法一、props/$emit

父組件A通過props的方式向子組件B傳遞，B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現(xiàn)。

1.父組件向子組件傳值

接下來我們通過一個例子，說明父組件如何向子組件傳遞值：在子組件Users.vue中如何獲取父組件App.vue中的數(shù)據(jù) users:["Henry","Bucky","Emily"]

 
 
 
 
    
  
  
  
  
  1. //App.vue父組件 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
 
 
 
 
總結(jié)：父組件通過props向下傳遞數(shù)據(jù)給子組件。注：組件中的數(shù)據(jù)共有三種形式：data、props、computed

2.子組件向父組件傳值（通過事件形式）

接下來我們通過一個例子，說明子組件如何向父組件傳遞值：當我們點擊“Vue.js Demo”后，子組件向父組件傳遞值，文字由原來的“傳遞的是一個值”變成“子向父組件傳值”，實現(xiàn)子組件向父組件值的傳遞。

 
 
 
 
    
  
  
  
  
  1. // 子組件 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // 父組件 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.  
    7. 
 
 
 
 
總結(jié)：子組件通過events給父組件發(fā)送消息，實際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。

方法二、$emit/$on

這種方法通過一個空的Vue實例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件,巧妙而輕量地實現(xiàn)了任何組件間的通信，包括父子、兄弟、跨級。當我們的項目比較大時，可以選擇更好的狀態(tài)管理解決方案vuex。

1.具體實現(xiàn)方式：  

 
 
 
 
    
  
  
  
  
  1. var Event=new Vue(); 
    2. 
  
  
  
  
  2. Event.$emit(事件名,數(shù)據(jù)); 
    3. 
  
  
  
  
  3. Event.$on(事件名,data => {}); 
    4.

2.舉個例子：兄弟組件有三個，分別是A、B、C，C組件如何獲取A或者B組件的數(shù)據(jù)

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.      
    5.
 
  •  
  •   
     
  •     

    A組件：{{name}}

     
  •     將數(shù)據(jù)發(fā)送給C組件 
  •   
    •  
  •  
  •  
  •   
     
  •     

    B組件：{{age}}

     
  •     將數(shù)組發(fā)送給C組件 
  •   
    •  
  •  
  •  
  •   
     
  •     

    C組件：{{name}}，{{age}}

     
  •   
    •  
  •  
  •  

    • 方法三、Vuex

    1.簡要介紹Vuex原理

    Vuex實現(xiàn)了一個單向數(shù)據(jù)流，在全局擁有一個State存放數(shù)據(jù)，當組件要更改State中的數(shù)據(jù)時，必須通過Mutation進行，Mutation同時提供了訂閱者模式供外部插件調(diào)用獲取State數(shù)據(jù)的更新。而當所有異步操作(常見于調(diào)用后端接口異步獲取更新數(shù)據(jù))或批量的同步操作需要走Action，但Action也是無法直接修改State的，還是需要通過Mutation來修改State的數(shù)據(jù)。根據(jù)State的變化，渲染到視圖上。

    2.簡要介紹各模塊在流程中的功能：

    • Vue Components：Vue組件。HTML頁面上，負責接收用戶操作等交互行為，執(zhí)行dispatch方法觸發(fā)對應(yīng)action進行回應(yīng)。

    • dispatch：操作行為觸發(fā)方法，是能執(zhí)行action的方法。

    • actions：操作行為處理模塊,由組件中的$store.dispatch('action 名稱', data1)來觸發(fā)。然后由commit()來觸發(fā)mutation的調(diào)用 , 間接更新 state。負責處理Vue Components接收到的所有交互行為。包含同步/異步操作，支持多個同名方法，按照注冊的順序依次觸發(fā)。向后臺API請求的操作就在這個模塊中進行，包括觸發(fā)其他action以及提交mutation的操作。該模塊提供了Promise的封裝，以支持action的鏈式觸發(fā)。

    • commit：狀態(tài)改變提交操作方法。對mutation進行提交，是能執(zhí)行mutation的方法。

    • mutations：狀態(tài)改變操作方法，由actions中的commit('mutation 名稱')來觸發(fā)。是Vuex修改state的推薦方法。該方法只能進行同步操作。操作之中會有一些hook暴露出來，以進行state的監(jiān)控等。

    • state：頁面狀態(tài)管理容器對象。集中存儲Vue components中data對象的零散數(shù)據(jù)，以進行統(tǒng)一的狀態(tài)管理。頁面顯示所需的數(shù)據(jù)從該對象中進行讀取，利用Vue的細粒度數(shù)據(jù)響應(yīng)機制來進行高效的狀態(tài)更新。

    • getters：state對象讀取方法。圖中沒有單獨列出該模塊，應(yīng)該被包含在了render中，Vue Components通過該方法讀取全局state對象。

    3.Vuex與localStorage

    vuex 是 vue 的狀態(tài)管理器，存儲的數(shù)據(jù)是響應(yīng)式的。但是并不會保存起來，刷新之后就回到了初始狀態(tài)，具體做法應(yīng)該在vuex里數(shù)據(jù)改變的時候把數(shù)據(jù)拷貝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的數(shù)據(jù)，取出來再替換store里的state。

     
 
 
 
      
  
  
  
  
    1. let defaultCity = "上海" 
      2. 
  
  
  
  
    2. try {   // 用戶關(guān)閉了本地存儲功能，此時在外層加個try...catch 
      3. 
  
  
  
  
    3.   if (!defaultCity){ 
      4. 
  
  
  
  
    4.     defaultCity = JSON.parse(window.localStorage.getItem('defaultCity')) 
      5. 
  
  
  
  
    5.   } 
      6. 
  
  
  
  
    6. }catch(e){} 
      7. 
  
  
  
  
    7. export default new Vuex.Store({ 
      8. 
  
  
  
  
    8.   state: { 
      9. 
  
  
  
  
    9.     city: defaultCity 
      10. 
  
  
  
  
    10.   }, 
      11. 
  
  
  
  
    11.   mutations: { 
      12. 
  
  
  
  
    12.     changeCity(state, city) { 
      13. 
  
  
  
  
    13.       state.city = city 
      14. 
  
  
  
  
    14.       try { 
      15. 
  
  
  
  
    15.       window.localStorage.setItem('defaultCity', JSON.stringify(state.city)); 
      16. 
  
  
  
  
    16.       // 數(shù)據(jù)改變的時候把數(shù)據(jù)拷貝一份保存到localStorage里面 
      17. 
  
  
  
  
    17.       } catch (e) {} 
      18. 
  
  
  
  
    18.     } 
      19. 
  
  
  
  
    19.   } 
      20. 
  
  
  
  
    20. }) 
      21.

    這里需要注意的是：由于vuex里，我們保存的狀態(tài)，都是數(shù)組，而localStorage只支持字符串，所以需要用JSON轉(zhuǎn)換：

     
 
 
 
      
  
  
  
  
    1. JSON.stringify(state.subscribeList);   // array -> string 
      2. 
  
  
  
  
    2. JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array  
      3.

    方法四、$attrs/$listeners

    1.簡介

    多級組件嵌套需要傳遞數(shù)據(jù)時，通常使用的方法是通過vuex。但如果僅僅是傳遞數(shù)據(jù)，而不做中間處理，使用 vuex 處理，未免有點大材小用。為此Vue2.4 版本提供了另一種方法，當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件。通常配合 interitAttrs 選項一起使用。

     
 
 
 
      
  
  
  
  
    1. // demo.vue 
      2. 
  
  
  
  
    2.