[VUE]记一个奇葩问题

100 阅读1分钟

父组件传值给子组件

data() {
  //这里存放数据
  return {
    petInfoForm: {
      isPet: "",
      liveNumber: "",
      pets: [],
    },
  };
},
props: {
  value: {
    type: Object,
    default() {
      return {};
    },
  }
},
watch: {
  "petInfoForm.liveNumber"(newVal, oldVal) {
    this.$refs.petInfoForm.setRules(this.rules);
  },
  petInfoForm: {
    handler(newValue, oldValue) {
      this.$emit("input", this.petInfoForm);
    },
    deep: true,
    immediate: true,
  },
},

正常应该从prop里取值;忘了之前为什么这么写了.
今天看代码发现没用到value,petInfoForm居然也有父组件给的新值.

查找原因

应当是watch初次$emit的时候把子组件的petInfoForm浅拷贝给了父组件,
父组件更新了petInfoForm的值之后子组件的也同步更新了.