亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue父組件通知子組件更新,可以監聽數據變化嗎?

vue父組件通知子組件更新,可以監聽數據變化嗎?

嗶嗶one 2019-05-11 17:23:41
問題描述我當前有一個父組件是a,他下面有二十多個子組件a1、a2等等,我想讓他們都進行余額更新。要怎么處理最好。問題出現的環境背景及自己嘗試過哪些方法本來想通過組件傳參,然后監聽數據變化來進行更新余額。但是并沒有觸發監聽的函數。雖然有另外一種實現方式,但是要注冊二十多種組件,判斷當前路由來調用子組件的方法,太過于麻煩。。。相關代碼父組件://組件傳參//觸發子組件函數this.amount=Math.random()子組件://propsprops:['amount']//監聽watch:{amount(val,oldval){console.log(111);//這里沒有反應}}你期待的結果是什么?實際看到的錯誤信息又是什么?想要更新余額,不知道我上述的代碼錯在哪里。
查看完整描述

2 回答

?
Cats萌萌

TA貢獻1805條經驗 獲得超9個贊

你需要20多個組件的余額更新,說明這個余額是個共用數據,特別是在多組件通信問題上,建議用vuex。
vuex就是通過狀態(數據源)集中管理驅動組件的數據的變化。解決眾多組件交互和同步數據的問題;應用級的狀態集中放在store中;改變狀態的方式是提交mutations,這是個同步的事物;異步邏輯應該封裝在action中。
stateVuex使用單一狀態樹,即每個應用將僅僅包含一個store實例,但單一狀態樹和模塊化并不沖突。存放的數據狀態,不可以直接修改里面的數據。mutationsmutations定義的方法動態修改Vuex的store中的狀態或數據。getters類似vue的計算屬性,主要用來過濾一些數據。actionactions可以理解為通過將mutations里面處里數據的方法變成可異步的處理數據的方法,簡單的說就是異步操作數據。view層通過store.dispath來分發action。
conststore=newVuex.Store({
state:{
count:0
},
mutations:{
increment(state){
state.count++
}
},
actions:{
increment(context){
context.commit('increment')
}
}
})
項目特別復雜的時候,可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰,方便管理。
constmoduleA={
state:{...},
mutations:{...},
actions:{...},
getters:{...}
}
constmoduleB={
state:{...},
mutations:{...},
actions:{...}
}
conststore=newVuex.Store({
modules:{
a:moduleA,
b:moduleB
})
建議采納我的答案,謝謝!
                            
查看完整回答
反對 回復 2019-05-11
?
當年話下

TA貢獻1890條經驗 獲得超9個贊

router-view本身是一個組件,你這樣傳參相當于是傳到了router-view里面,而并不是你的子路由頁面的組件。幾種思路:1.不妨了解一下Vuex,非常簡單的,多組件共享數據首選,響應式。2.eventBus3.思考一下共同的部分是不是可以放在router-view的父組件實現(常見的比如同一網站的所有頁頭通常就用同一個組件,訪問子路由不需要重新渲染),如果可以的話很節省效率。
                            
查看完整回答
反對 回復 2019-05-11
  • 2 回答
  • 0 關注
  • 2350 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號