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

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

踩坑場景

clipboard.png

clipboard.png

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

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

  • 點擊姓名時,攜帶name跳轉到【姓名編輯頁】,並顯示到input上
  • 用戶走編輯接口時,須要跳轉回以前的頁面,而且把修改後的name攜帶回來。
那麼如何作呢,我把這兩個vue組件,很草率的設計成【不一樣路由】的組件了。計劃用eventBus或者vuex通訊。

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

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

選擇用eventBus來作的「瑕疵」

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

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

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

clipboard.png

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

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

那麼,這算不算eventBus的缺陷呢?code

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

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

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

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

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

選擇監聽$route的變化

這也是一個不錯的方法

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

clipboard.png

在另一個頁面,我經過this.$route
clipboard.png
.params.phone賦值給phone

選擇用vuex作

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

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

clipboard.png

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

clipboard.png
clipboard.png
clipboard.png

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

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

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

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