踩坑場景
須要的效果是移動端的一個編輯我的信息的頁面。點擊姓名一欄,跳轉到另外一個頁面去編輯姓名。vue
其中,設計到的通訊時有2個方面vuex
那麼如何作呢,我把這兩個vue組件,很草率的設計成【不一樣路由】的組件了。計劃用eventBus或者vuex通訊。 因爲缺少認知,沒有真正的理解eventBus和路由傳參、vuex各自的適用場景,因此才形成了草率的設計, 實際上,這裏的組件關係設計是不合理的,應該設計成父子關係。由於從邏輯上他們也是父子關係,也方便通訊。
我使用eventBus後,基本上能夠通訊了,但有點「瑕疵」cookie
在用戶點擊姓名一欄時,我跳轉路由,而且$emit觸發事件session
在編輯頁面,我在mouted裏$on監聽事件this
這樣的致使的Bug是,第一次進入編輯頁時,沒法監聽到事件,數據也沒法被傳遞到編輯頁面spa
緣由是,第一次emit時,編輯組件還不存在,還沒監聽你就觸發,天然是觸發不了事件的。設計
那麼,這算不算eventBus的缺陷呢?code
我以爲這是因爲我對eventBus的理解不夠。對象
我覺得eventBus是專門處理兄弟組件之間通訊的,可是實際上,eventBus是專門處理 [同一個路由下] 的複雜組件之間通訊的。若是涉及誇路由的組件通訊。能夠考慮利用$route對象傳參或者Vuex接口
在上面例子中,跨路由的組件通訊,使用eventBus可能出現我emit,可是另外一個組件還不存在,也沒有監聽。 致使第一次的數據傳遞失敗.
這也是一個不錯的方法
點擊phone時,我click事件裏,跳轉路由,而且傳遞params參數
在另一個頁面,我經過this.$route
.params.phone賦值給phone
Vuex來作的話也能夠,可是其實不太合適
在點擊name時,我跳轉路由,而且提交commit來修改state
在編輯name的頁面,選擇用this.$store.state.name綁定到Input上,用@input事件監聽變化,變化後提交commit
若是上天在給我一次機會,我以爲必定要把它們設計成父子關係。