VUE父组件与子组件的数据传递

Posted 2021-12-13 усил

父组件与子组件

侦听 watch

引用基本数据类型：引用的是地址 （地址里面存放值）

基本数据类型：引用的是值（每一个值所对应的地址是不一样的）

侦听的本质是：侦听地址是否发生改变

watch: {
    // 侦听基本数据类型
    value: function() {
      console.log("侦听到基本数据类型")
    },
    // 侦听引用数据类型
    obj: function() {
      console.log("侦听到引用数据类型")
    },
}

初始化前（父组件传值给子组件）是不触发的。

原因是：初始化时，是将子组件中变量（基本数据类型， 引用数据类型）指针指向数据的地址

解决方法：后面内容有解决方法

渲染完毕后，修改数据时，是否监听到得分两种情况：基本数据类型、引用数据类型

但只要知道侦听的本质（地址是否发生改变），就能分清子组件的侦听器是否侦听到

注意点：在 vue项目中， 父组件与子组件之间数据的传递：必须遵循一个规则：指向的地址必须一致，值可以任意。

因此，在子组件中一旦修改基本数据类型时，程序会报错（地址发生改变）。修改引用数据类型（obj.name）时，值改变，但地址是不改变的。

此时，如果按照上面的代码：value 是可以侦听到的（地址发生改变），obj不可以侦听到（地址不发生改变）

引用数据类型要想侦听到，针对上面的例子，obj 要改成 obj.name 就能监听到

正因为：指向的地址必须一致，值可以任意

（1）子组件尝试修改父组件传递过来的数据obj.name时，能够修改，但会影响到父组件中传递过来的数据（父组件和子组件指向的地址是一致的，值发生改变）

（2）子组件尝试修改父组件传递过来的数据时（每一个值所对应的地址是不一样的），会报错（违反了父组件与子组件之间数据的传递：必须遵循一个规则：指向的地址必须一致，值可以任意）

解决子组件修改基本数据类型时

props: {
   value: String,
}
data:() {
    return {
       v1: this.value
    }
}
watch: {
    v1: function() {
        this.v1 = "修改基本数据类型"
        console.log("不报错", this.v1)
    }
}

这种方法，可以修改数据，并且不会影响到父组件。但还是无法解决初始化是不能执行

解决子组件初始化时，侦听器无法触发的问题

watch: {
  value: {
      handler: function () {
        console.log("侦听到基本数据类型");
      },
      immediate: true, 
    },
    obj: {
      handler: function () {
        console.log("侦听到引用数据类型");
      },
      immediate: true,
    },
}

immediate: true 初始化就执行 （created阶段）

生命周期

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted