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

Question

问题描述
我当前有一个父组件是a，他下面有二十多个子组件a1、a2等等，我想让他们都进行余额更新。要怎么处理最好。
问题出现的环境背景及自己尝试过哪些方法
本来想通过组件传参，然后监听数据变化来进行更新余额。但是并没有触发监听的函数。
虽然有另外一种实现方式，但是要注册二十多种组件，判断当前路由来调用子组件的方法，太过于麻烦。。。
相关代码
父组件：
//组件传参
//触发子组件函数
this.amount=Math.random()
子组件:
//props
props:['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的父组件实现(常见的比如同一网站的所有页头通常就用同一个组件，访问子路由不需要重新渲染)，如果可以的话很节省效率。