关于父子组件传值中总结（watch， this.$refs的使用）

vue中父子组件执行的生命周期

1. 父组件获得请求数据，通过prop向子组件传值 ------ 父传子

问题表述：
组件化开发中经常用到父子组件的通信，如果父组件的数据是发请求从后端获取的异步数据，那么父组件将这个数据传递给子组件的时候。 因为是异步数据，所以会出现父组件传递过去了，但是子组件mounted钩子初始情况下接受不到数据。

解决办法

// 子组件中添加监听
props: {
   msg: {
       type: Object,
       default: () => {}
   }
},
 watch: {
   // 监听到父组件传递过来的数据后，加工一下，
   // 存到data中去，然后在页面上使用
   msg(newnew, oldold) {
     console.log("监听", newnew, oldold);
     this.editMsg = "---" + newnew + "---";
   },
 },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

复习下父子组件的生命周期

父 beforeCreate
父 created
父 beforeMount

子 beforeCreate
子 created
子 beforeMount
子 mounted

父 mounted

watch的执行时机

watch最初绑定不立即执行，等到值改变后才执行，正常是computed之后执行

如果加了属性immediate:true 则在最初绑定就执行，此时在beforecreate 和 created之间执行

deep属性监听对象内部的改变，无论多深都可以监听到

子组件中定义表单，父组件调用子组件的校子传验 ----- 父传子

1. 子组件定义validate函数
2. 父组件利用this.$refs.xxx.validate((valid, res) => {}) 调用，对子组件数据进行校验，并获得子组件传递的值 (利用回调函数传值)
3. 注意：子组件要通过ref绑定

// 子组件中
   validate(callback) {
      this.$refs.formModule.validate((valid) => {
        callback(valid, this.formModule); // 将写好的数据传递给父组件， valid校验字段，数据
      });
    },
 // 父组件
  this.$refs.unifyForm.validate((valid, res) => {
        if (valid) {
          this.$message({
            showClose: true,
            message: "保存数据成功！",
            type: "success",
          });
          this.formData = Object.assign(this.formData, res);
          // 发送后端请求
          console.log(this.formData, "保存数据");
        }
      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19