Vue通过v-modal实现子组件通讯

1、在props设置属性value

props: {
    value: {
      type: Object,
      default: {}
    }
  }

1、设置data数据，接收value，在mounted或created中赋值

 data(){
   return {
     valueObj:{}
   }
 },
mounted() {
   this.valueObj = this.value;
 },

3、监听变化，监听value，根据实际情况使用，否则会循环监听导致卡死；监听数据valueObj编号并通知父组件

 watch: {
    //监听子组件
    value: {
      immediate: true, // 第一次数据传入后立即监听
      deep: true, // 深度监听
      handler(val, oval) {
         //处理逻辑，更新子组件
      },
    },
    //监听属性变化
    valueObj: {
        immediate: true, // 第一次数据传入后立即监听
        deep: true, // 深度监听
        handler(val, oval) {
          if (val != oval) {
            this.$emit('input', val);
          }
        },
    },
}

4、注意事项：父组件尽量使用v-if使子组件保持最新数据，使数据一致；

5、注意事项：子组件调用父组件事件后，可能数据未更新至父组件，父组件事件中可使用this.$nextTick方法。

6、注意事项：方法命名规则，尽量使用独特的命名，避免使用保留字；否则会导致莫名其妙，并无法找到原因的问题。