场景:父组件发生数据变化,动态的传递给子组件,子组件实时刷新视图
解决方法:需要在子组件watch中(监听)父组件数据的变化
在子组件中使用watch应该注意的问题:
1.watch监听普通类型的数据:
data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } }
2.watch监听数组类型 的数据
data() { return { winChips: new Array(11).fill(0) } }, watch: { winChips: { handler(newValue, oldValue) { for (let i = 0; i < newValue.length; i++) { if (oldValue[i] != newValue[i]) { console.log(newValue) } } }, deep: true } }
3.watch监听对象类型的数据
data() { return { bet: { pokerState: 53, pokerHistory: ‘local‘ } } }, watch: { bet: { handler(newValue, oldValue) { console.log(newValue) }, deep: true } }
4.watch监听对象的具体属性:(结合computed)
data() { return { bet: { pokerState: 53, pokerHistory: ‘local‘ } } }, computed: { pokerHistory() { return this.bet.pokerHistory } }, watch: { pokerHistory(newValue, oldValue) { console.log(newValue) } }
tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://www.cnblogs.com/sheandhe/p/10485024.html