Vue2父组件关闭通用弹窗时触发子表单清除校验的方案问询

以下方案均不修改通用Popup组件的原有逻辑，兼顾复用性：

方案1：ref 直接调用子组件方法（最简实现，适合层级浅的场景） #

• 父组件Dashboard.vue中给<FormX>组件绑定 ref 标识：

  <FormXPopup v-show="isVisible" @close="handlePopupClose">
    <FormX ref="formRef" />
  </FormXPopup>
  

• 父组件的关闭事件回调中先调用表单的清除校验方法，再修改显隐状态：

  methods: {
    handlePopupClose() {
      // 兼容ref未挂载的边界情况
      if (this.$refs.formRef) {
        this.$refs.formRef.clearValidate()
      }
      this.isVisible = false
    }
  }
  

• 适用场景：父组件和表单组件层级直接，没有多层嵌套的简单业务场景。

方案2：新增before-close钩子扩展FormXPopup能力（最符合开闭原则，推荐） #

因为FormXPopup是业务层封装的弹窗组件，我们可以在这一层扩展能力，完全不侵入通用Popup的逻辑：

• 在FormXPopup.vue中新增beforeClose属性，接收关闭前的前置执行函数：

  props: {
    beforeClose: {
      type: Function,
      default: () => Promise.resolve()
    }
  },
  methods: {
    async handleInnerPopupClose() {
      // 先执行前置钩子，再向外抛出close事件
      await this.beforeClose()
      this.$emit('close')
    }
  }
  

• 父组件使用时传入清除校验的逻辑即可：

  <FormXPopup 
    v-show="isVisible" 
    @close="isVisible = false"
    :before-close="() => $refs.formRef.clearValidate()"
  >
    <FormX ref="formRef" />
  </FormXPopup>
  

• 适用场景：后续其他弹窗也有关闭前的自定义前置逻辑需求时，可复用该扩展能力，通用性最强。

方案3：EventBus 事件总线（适合跨多级组件嵌套场景） #

如果表单组件和父组件之间嵌套层级很深，不想层层传递ref或props，可以用Vue2的事件总线实现：

• 全局挂载事件总线（可在main.js中配置）：

  Vue.prototype.$bus = new Vue()
  

• FormX组件内监听清除校验事件，注意组件销毁前解绑事件避免内存泄漏：

  mounted() {
    this.$bus.$on('clearFormValidate', this.clearValidate)
  },
  beforeDestroy() {
    this.$bus.$off('clearFormValidate', this.clearValidate)
  }
  

• 父组件关闭弹窗前触发对应事件：

  methods: {
    handlePopupClose() {
      this.$bus.$emit('clearFormValidate')
      this.isVisible = false
    }
  }
  

• 适用场景：表单嵌套层级深，跨组件通信的场景。

内容的提问来源于stack exchange，提问作者Albert de Beer