Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？

最新推荐文章于 2024-07-15 16:28:32 发布

景尘

最新推荐文章于 2024-07-15 16:28:32 发布

阅读量1.3w

点赞数

分类专栏：前端vue技术点干货分享文章标签：子组件实时更新 watch

本文链接：https://blog.csdn.net/lbpro0412/article/details/86623611

版权

前端vue技术点干货分享专栏收录该内容

77 篇文章 24 订阅 ¥99.90 ¥299.90

订阅专栏

本文介绍在Vue中，当父组件数据变化并动态传递给子组件时，如何确保子组件视图实时刷新。解决方案在于子组件通过watch监听父组件的数据变化，并详细讨论了watch监听普通数据、数组、对象以及对象属性的情况，强调了immediate属性在初始化时触发handler的重要性。

摘要由CSDN通过智能技术生成

场景：父组件发生数据变化，动态的传递给子组件，子组件实时刷新视图，有的时候是在mounted里面调用方法，然后这个方法只执行一次，所以需要监听数据的变化，调取对应的方法

解决方法：需要在子组件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.

了解本专栏