一次踩坑經歷看vue幾個組件通訊的適用場景

一次業務中Vue組件通訊的踩坑記錄

踩坑場景

須要的效果是移動端的一個編輯我的信息的頁面。點擊姓名一欄，跳轉到另外一個頁面去編輯姓名。

其中，設計到的通訊時有2個方面

• 點擊姓名時，攜帶name跳轉到【姓名編輯頁】，並顯示到input上
• 用戶走編輯接口時，須要跳轉回以前的頁面，而且把修改後的name攜帶回來。

那麼如何作呢，我把這兩個vue組件，很草率的設計成【不一樣路由】的組件了。計劃用eventBus或者vuex通訊。

因爲缺少認知，沒有真正的理解eventBus和路由傳參、vuex各自的適用場景，因此才形成了草率的設計，

實際上，這裏的組件關係設計是不合理的，應該設計成父子關係。由於從邏輯上他們也是父子關係，也方便通訊。

選擇用eventBus來作的「瑕疵」

我使用eventBus後，基本上能夠通訊了，但有點「瑕疵」

在用戶點擊姓名一欄時，我跳轉路由，而且$emit觸發事件

在編輯頁面，我在mouted裏$on監聽事件

這樣的致使的Bug是，第一次進入編輯頁時，沒法監聽到事件，數據也沒法被傳遞到編輯頁面

緣由是，第一次emit時，編輯組件還不存在，還沒監聽你就觸發，天然是觸發不了事件的。

那麼，這算不算eventBus的缺陷呢？

我以爲這是因爲我對eventBus的理解不夠。

我覺得eventBus是專門處理兄弟組件之間通訊的，可是實際上，eventBus是專門處理 [同一個路由下] 的複雜組件之間通訊的。

若是涉及誇路由的組件通訊。能夠考慮利用$route對象傳參或者Vuex

在上面例子中，跨路由的組件通訊，使用eventBus可能出現我emit，可是另外一個組件還不存在，也沒有監聽。

致使第一次的數據傳遞失敗.

選擇監聽$route的變化

這也是一個不錯的方法

點擊phone時，我click事件裏，跳轉路由，而且傳遞params參數

在另一個頁面，我經過this.$route

.params.phone賦值給phone

選擇用vuex作

Vuex來作的話也能夠，可是其實不太合適

在點擊name時，我跳轉路由，而且提交commit來修改state

在編輯name的頁面，選擇用this.$store.state.name綁定到Input上，用@input事件監聽變化，變化後提交commit

回到最初，設計成父子組件的關係。

若是上天在給我一次機會，我以爲必定要把它們設計成父子關係。

最後總結一下Vue通訊的幾個方式，和各自的適用場景

• 父子組件通訊: 父子關係
• eventBus通訊 : 同一個路由下，複雜組件的通訊。
• Vuex: 全局的、跨越路由、非父子組件的通訊均可以用它關係
• 利用$route的params或者query: 跨路由的能夠用，但同一個路由下就不適合用了。
• localStorage / cookie / sessionStorage: 全局能夠用，可是存儲到本地
• 甚至利用Vue實例上添加值 （不建議）