父组件打开子组件弹窗填写（已有数据）表单

子组件获取父组件数据注意事项

1、使用watch

要通过watch监听数据是否变动，变动后再将props的A赋值给子组件data里面的B，然后整个子组件是对B进行的表单填写而非A！！！

• 结合immediate: true确保首次打开也能初始化
• 使用deep：true，深度监听，当数组或者对象内部属性变化时也能监听到（同时也可能会触发多次调用watch）

2、nextTick

使用nextTick后再赋值，这样能够保证不论A多次变化，最后只触发一次watch，不会导致watch多次频繁触发。

3、赋值方式

• 深拷贝、浅拷贝视情况适用，不推荐直接复制（A=B）
• 浅拷贝： B={...A} 或 B=[...A]    只拷贝第一层
• 深拷贝：  B = JSON.parse(JSON.stringify(A))  全部层级都拷贝了

如果是对象里面某一个属性是list，那么list的内容浅拷贝无法拷贝，深拷贝可以。

数据举例：     A ={a,b，c} B = A  b是list数组对象（[{name:'',age:''}]）

出现的问题：如果使用浅拷贝，那么当我修改a,c的内容后，当我修改b时候才会a, c的数据会变成A里面的最初的数据。

解析原因：

其实是因为重新走一遍watch了。

由于是浅拷贝，所以b引用的还是A，因此b发生变化由于deep为true，会触发watch重新赋值。

4、避免在created/mounted中直接初始化

• 这些钩子只执行一次，无法响应弹窗多次打开的需求
• 数据可能还未从父组件传递过来

5、赋值后清除校验结果

•   this.$refs.form.clearValidate()

6、响应式处理

当我获取父组件的数据后，对获取后的对象或者数组内部属性的重新加工处理后重新展示让用户填写，不要直接=，会导致渲染延迟！！！

A ={a,b,c} b是list数组对象（[{name:'',date1:''，date2：''}]）

当我深拷贝赋值给B以后，我又对b里面的date1、date2做了新处理，合并为date[date1,date2]用做新展示。直接对b循环赋值   =[x,x]  会导致用户对date进行修改后表单没有及时渲染，而是要修改其他a,c或者name之后才会渲染！！！

• 使用this.$set()确保date属性是响应式的

export default {
  props: ['dialogVisible', 'editData'],
  data() {
    return {
      formData: {
        name: '',
        email: '',
        // 其他字段初始化
      },
      isInitialized: false
    }
  },
  watch: {
    // 监听弹窗显示状态
    dialogVisible: {
      handler(visible) {
        if (visible && this.editData) {
          this.$nextTick(() => {
            this.initializeFormData();
          });
        }
      },
      immediate: true
    },
    // 监听数据变化
    editData: {
      handler(newVal) {
        if (newVal && this.dialogVisible) {
          this.$nextTick(() => {
            this.initializeFormData();
          });
        }
      },
      deep: true
    }
  },
  methods: {
    initializeFormData() {
      // 防止重复初始化
      if (!this.editData) return;
      
      // 深拷贝数据避免引用问题
      this.formData = JSON.parse(JSON.stringify(this.editData));
      this.formData.editData.forEach(hotel => {
            if (hotel.beginDate && hotel.endDate) {
              this.$set(hotel, 'dateRange', [hotel.beginDate, hotel.endDate])
            } else {
              this.$set(hotel, 'dateRange', [])
            }
          })
      
      // 清除之前的校验状态
      this.$nextTick(() => {
        this.$refs.formRef && this.$refs.formRef.clearValidate();
      });
    }
  }
}