vue中如何封装弹窗组件才能使项目更好维护

业务场景：

弹窗一般用于数据编辑、数据选择和动作确认，归纳而言就是作为某个流程的中间环节

已知实现方案和优劣：

1.（暂定）把弹窗及内容封装为一个组件，该组件暴露一个返回 promise 的 open 方法来打开弹窗。代码如下：

• 父组件中使用封装好的弹窗组件 CustomersDetail.vue

<template>
  <div>
    <el-button @click="addCustomers">新增客户</el-button>
    <CustomersDetail ref="customersDetail"></CustomersDetail>
  </div>
</template>
<script>
import {
      defineComponent, ref } from '@vue/composition-api'
import CustomersDetail from './CustomersDetail.vue'

export default defineComponent({
     
  components: {
      CustomersDetail },
  setup() {
     
    const customersDetail = ref(null)
    const addCustomers = async () => {
     
      const customersData = await customersDetail.value.open()
      // ...doSome
    }
    return {
     
      addCustomers,
      customersDetail
    }
  }
})