鍍金池/ 問答/HTML/ vue組件之間通信的問題

vue組件之間通信的問題

clipboard.png
現(xiàn)在右側(cè) 綠色的導(dǎo)航欄是組件 navMenu.vue 紅色區(qū)域是foodList.vue組件
當(dāng)點擊navMenu.vue的不同導(dǎo)航時候 foodList.vue組件要出現(xiàn)不同的數(shù)據(jù)

請問這兩個組件之間應(yīng)該怎么寫通信 以及 相互之間Import的問題

回答
編輯回答
厭惡我

2種實現(xiàn)方式，一是不通過路由，只是修改foodist組件的內(nèi)容，傳值方式有3種，一是兄弟組件傳值，二是使用一個空的 Vue 實例作為事件總線，三是vuex。點擊navMenu的導(dǎo)航欄，將id傳給foodlist組件，然后通過這個id來處理修改foodlist中的數(shù)組。二是通過動態(tài)路由來處理，這個可以看官方文檔。思路給你了，剩下的你可以自己去查資料來解決。

2017年8月24日 05:28
編輯回答
旖襯

vuex

2018年7月12日 05:25
編輯回答
司令

navMenu.vue組件中調(diào)用父組件的方法，修改傳遞給foodList.vue的數(shù)據(jù)值jike

<tip @getCan='getCan'></tip>

子組件中使用this.$emit('getCan') 即可調(diào)用父組件的getCan方法

2018年4月11日 23:15
編輯回答
壞脾滊

vue-router 和 vuex 都可以實現(xiàn)

2017年3月24日 00:41
編輯回答
裸橙

三個辦法：

  1. 這兩個組件放在一個頁面，就沒有傳值的問題，缺點是沒法url不會變化
  2. 通過vuex，一次性獲取所有數(shù)據(jù)，存起來，根據(jù)不同的路由參數(shù)，篩選需要的數(shù)據(jù)
  3. 在組建內(nèi)通過導(dǎo)航守衛(wèi)beforeRouteEnter，根據(jù)路由參數(shù)異步請求數(shù)據(jù)庫獲取數(shù)據(jù)

個人推薦第二種

2018年5月19日 09:51
編輯回答
挽歌

從你的描述來看，應(yīng)該使用vux

2018年8月6日 14:36
編輯回答
好難瘦

點擊右側(cè)的導(dǎo)航欄，把對應(yīng)的id傳給左側(cè)的組件，左側(cè)的組件進行數(shù)據(jù)請求，并且渲染數(shù)據(jù)，可以采用動態(tài)路由來做。

2018年5月18日 10:58
編輯回答
吃藕丑

用vue-router的嵌套路由+動態(tài)路由匹配就可以實現(xiàn)
https://router.vuejs.org/zh-c...

2017年9月4日 11:23