vue父组件通知子组件更新，可以监听数据变化吗？

Question

问题描述我当前有一个父组件是a，他下面有二十多个子组件a1、a2等等，我想让他们都进行余额更新。要怎么处理最好。问题出现的环境背景及自己尝试过哪些方法本来想通过组件传参，然后监听数据变化来进行更新余额。但是并没有触发监听的函数。虽然有另外一种实现方式，但是要注册二十多种组件，判断当前路由来调用子组件的方法，太过于麻烦。。。相关代码父组件：//组件传参//触发子组件函数this.amount=Math.random()子组件://propsprops:['amount']//监听watch:{amount(val,oldval){console.log(111);//这里没有反应}}你期待的结果是什么？实际看到的错误信息又是什么？想要更新余额，不知道我上述的代码错在哪里。

Answer 1

你需要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
})
建议采纳我的答案，谢谢！
                            

Answer 2

router-view本身是一个组件，你这样传参相当于是传到了router-view里面，而并不是你的子路由页面的组件。几种思路：1.不妨了解一下Vuex，非常简单的，多组件共享数据首选，响应式。2.eventBus3.思考一下共同的部分是不是可以放在router-view的父组件实现(常见的比如同一网站的所有页头通常就用同一个组件，访问子路由不需要重新渲染)，如果可以的话很节省效率。