已封装BaseModal组件：如何实现可复用Vuetify对话框的关闭与跨弹窗跳转

先修正原代码的语法/逻辑坑，再实现方法：

• 原props里dataBindingName的类型写法错误，要改成标准对象结构，同时补上模板里用到的未定义prop（title/width/overlay），修正后的props代码：

props: {
  // 修正类型写法
  dataBindingName: {
    type: Boolean,
    default: false,
    required: false
  },
  // 补充模板用到的其他prop
  title: {
    type: String,
    default: ''
  },
  width: {
    type: [String, Number],
    default: 500
  },
  overlay: {
    type: Boolean,
    default: false
  }
}

因为现有inputVal计算属性的setter已经封装了向父组件发送input事件的逻辑，只需要给计算属性赋值false即可触发父组件更新弹窗状态，直接实现closeModal方法：

methods: {
  closeModal() {
    this.inputVal = false
  }
}

该写法完全符合Vue单向数据流规范，不需要在BaseModal内部维护额外状态。

整个逻辑靠父组件统一管理多个弹窗的显示状态即可，分两种场景处理：

场景1：按钮直接写在BaseModal的插槽内容里 #

首先父组件先定义两个弹窗的显示状态：

data() {
  return {
    showCurrentModal: false, // 当前要关闭的弹窗状态
    showNewModal: false      // 要打开的新弹窗状态
  }
}

然后父组件模板里优化原BaseModal的调用方式（因为BaseModal已经符合Vue 2的v-model规范，直接用v-model替代手动传dataBindingName，更简洁）：

<!-- 当前弹窗 -->
<modal-simple v-model="showCurrentModal" title="Nouveau" width="418">
  <template v-slot:content>
    <add-time-sheet-form />
    <!-- 弹窗内部的按钮 -->
    <v-btn color="primary" @click="switchModal">打开新弹窗</v-btn>
  </template>
</modal-simple>

<!-- 新弹窗 -->
<modal-simple v-model="showNewModal" title="新弹窗" width="500">
  <template v-slot:content>
    <!-- 新弹窗的内容 -->
  </template>
</modal-simple>

父组件里实现切换方法，为了避免Vuetify弹窗关闭/打开的动画冲突，加$nextTick优化：

methods: {
  switchModal() {
    this.showCurrentModal = false
    // 等当前弹窗关闭动画走完再打开新弹窗
    this.$nextTick(() => {
      this.showNewModal = true
    })
  }
}

场景2：按钮放在插槽引用的子组件内部（比如add-time-sheet-form内部的按钮） #

因为插槽内容是在父组件作用域下编译的，子组件的自定义事件会直接被父组件捕获，不需要额外的事件总线或者Vuex：

1. 先在add-time-sheet-form内部的按钮点击事件里触发自定义事件：

// add-time-sheet-form内部的方法
handleConfirm() {
  // 向父级抛出需要切换弹窗的信号
  this.$emit('trigger-switch-modal')
}

2. 父组件在引用add-time-sheet-form时监听这个自定义事件即可：

<template v-slot:content>
  <!-- 监听子组件抛出的事件 -->
  <add-time-sheet-form @trigger-switch-modal="switchModal" />
</template>

后续的switchModal逻辑和场景1完全一致。

内容的提问来源于stack exchange，提问作者SAFSAF