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

Question

问题描述

我当前有一个父组件是a，他下面有二十多个子组件a1、a2等等，我想让他们都进行余额更新。要怎么处理最好。

问题出现的环境背景及自己尝试过哪些方法

本来想通过组件传参，然后监听数据变化来进行更新余额。但是并没有触发监听的函数。

虽然有另外一种实现方式，但是要注册二十多种组件，判断当前路由来调用子组件的方法，太过于麻烦。。。

相关代码

父组件：

//组件传参
<router-view :amount="amount" />
//触发子组件函数
this.amount = Math.random()

子组件:

//props
props: ['amount']
//监听
watch:{
    amount(val,oldval){
        console.log(111);//这里没有反应
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？

想要更新余额，不知道我上述的代码错在哪里。

Answer 1

你需要20多个组件的余额更新，说明这个余额是个共用数据，特别是在多组件通信问题上，建议用vuex。

vuex就是通过状态（数据源）集中管理驱动组件的数据的变化。解决众多组件交互和同步数据的问题；
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

const store = new Vuex.Store({ 
 state: {
 count: 0
 },
 mutations: { 
 increment (state) {
 state.count++
 }
 },
 actions: {
 increment (context) {
 context.commit('increment')
 }
 }
})

项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 } 
const store = new Vuex.Store({
 modules: {
 a: moduleA,
 b: moduleB
})

建议采纳我的答案，谢谢！

Answer 2

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

Answer 3

你组件叫 router-view?
打开的是同一个路由么?

Answer 4

有个.sync功能
https://www.jianshu.com/p/6b0...

Answer 5

你在data中赋值一下props传递的值 再监听下看看

Answer 6

这么多组件都需要更新数据，还是使用vuex吧，全局注册vuex就行了