Vue之props赋值给data 数据变化

素颜马尾好姑娘i 2023-01-21 04:27 46阅读 0赞

> 问题：当组件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>