Vue之props赋值给data 数据变化

最新推荐文章于 2025-02-22 11:17:43 发布

Jocelyn_书

最新推荐文章于 2025-02-22 11:17:43 发布

阅读量4.9k

点赞数 4

分类专栏： VUE 项目文章标签： Vue props

本文链接：https://blog.csdn.net/weixin_42307283/article/details/116792057

版权

项目同时被 2 个专栏收录

43 篇文章

订阅专栏

VUE

12 篇文章

订阅专栏

本文探讨了在Vue组件中，如何解决props对象引用类型数据的更新问题，通过watch和computed机制实现data同步更新。实例展示了使用watch监听props变化并重新赋值给data的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：当组件props里的某个值（a）（a值要是对象引用类型的数据）赋给了data对象里的某个值 (b); 当a值发生了变化，b值还是最开始的a值, 但实际应该是b值是最新的a值

例如：

<template>
  
</template>

<script>
export default {
    name:'child '
    props:{
        a:{
            type:Object
        }
    },
    data(){
        return{
            b:this.a
        }
    },
    mounted(){
        console.log("b",this.b) //打印出来是a:{a1:1}
        //a值改变后打印b值
         console.log("b",this.b) //打印出来还是a:{a1:1}
    }
}
</script>

<style>

</style>
<!-------------------------------------------------------->
<template>
   <!---引用子组件--->
  <child :a="a"></child>
</template>

<script>
export default {
    data(){
        return{
            a:{
                a1:1
            }
        }
    },
    mounted(){
        //改变a值
        this.a.a1 = 2
    }
    
}
</script>

<style>

</style>

原因：因为data深拷贝的props的值，data无法随着props的变化而更新；

解决：watch、computed可以解决

<template>
  
</template>

<script>
export default {
    name:'child '
    props:{
        a:{
            type:Object
        }
    },
    data(){
        return{
            b:this.a
        }
    },
    watch:{
        a(val){
            //当a值变化时
            this.b = this.a
        }
    },
    mounted(){
        //a值改变后打印b值
         console.log("b",this.b) //打印出来就是最新值了   a:{a1:2}
    }
}
</script>

<style>

</style>