vue props data 父子组件

vue props data 父子组件

子组件通过props接受父组件传入的值

data() {
          return {
              userName: this.userData.name
          }
        },

user.name是String,属于基本数据类型,用它给子组件data中的userName赋值,属于基本数据类型赋值当父组件的user,name发生变化时,子组件中的userName并不会随之变化.
解决的方法: 通过监听props中的值,手动变更局部变量, Watch,Computed

 watch: {
            'userData.name': function (val) { //监听props中的属性
                this.userName = val;
            }
        },

 computed: {
            computedUserName(){
                return this.userData.name
            }
        },

由于data在初始化后深拷贝,props再次变化data并不会刷新,Vue会递归地遍历data所有属性,并使用Object.defineProperty把这些属性全部转换为getter/setter,让data中的属性更具"交互性",以此作为实现双向绑定的基础,这也是为什么只有在组件初始化之初,data中已经声明的属性才具有交互性,即data中的属性变化会引起视图变化,而其他在最初data中没有声明的属性则不会,