[vue] 子组件动态更新，父组件向子组件Prop传递实时更新

今天工作遇到一个问题，vue中，父组件调用了子组件，初始化的时候可以正确显示。需要实时监控后台数据，向子组件传递，更新页面。

百度了一下，说使用watch可以监听。

试了一下，发现并不能改变。debug模式看了一下，数据已经接收到了，因为子组件还有孙子组件。这部分没有进行监听，修改了孙子组件，发现可以在页面上看到效果了。

这时候，日志中会报错

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "startVal"

发现是因为子组件中如果直接更新操作prop值，有风险，可能会影响到父组件，所以在子组件中建变量来接收存储prop值的动态更新，不直接去修改prop值，问题解决

父组件

 

子组件

子组件的子组件