526互联

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

发布时间 2023-05-22 09:57:28作者: newbigapple

1、在props设置属性value

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

1、设置属性，接收value，在mounted或created中赋值

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

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

 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方法。