vue3 element-plus el-dialog 二次封装，多层调用

如果直接用 v-model 绑定值，然后封装在 dev 环境没有问题，但是放到服务器上会报错：

ReferenceError: visible is not defined at ut.onUpdate:modelValue.a.<computed

解决方案：

封装 el-dialog 为 base-dialog

<template>
  <el-dialog
    class="base-dialog"
    :title="title"
    width="60%"
    v-model="visible"
    :before-close="handleClose"
    v-bind="$attrs"
    @open="handleOpen"
  >
    <div
      class="body-wrapper"
      :class="autoHeight ? 'autoHeight' : 'fixedHeight'"
    >
      <slot></slot>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="showCancelButton" @click="handleClose">取消</el-button>
        <el-button
          v-if="showConfirmButton"
          type="primary"
          @click="handleConfirm"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '提示',
  },
  autoHeight: {
    type: Boolean,
    default: true,
  },
  showCancelButton: {
    type: Boolean,
    default: true,
  },
  showConfirmButton: {
    type: Boolean,
    default: true,
  },
})
const emit = defineEmits([
  'update:modelValue',
  'closeDialog',
  'handleConfirm',
  'close',
  'confirm',
  'open',
])
// 打开
const handleOpen = () => {
  emit('open')
}
// 子组件定义自己的visible
const visible = computed({
  get: () => props.visible,
  set: (value) => {
    // emit('update:modelValue', value)
  },
})
// 关闭弹窗
const handleClose = () => {
  emit('closeDialog')
  emit('close')
  // visible.value = false
}

// 点击确定
const handleConfirm = () => {
  emit('handleConfirm')
  emit('confirm')
}
</script>

<style lang="scss" scoped>
.body-wrapper {
  overflow: auto;
}
.autoHeight {
  max-height: 56vh;
}
.fixedHeight {
  height: 56vh;
}
</style>

<style lang="scss">
.base-dialog {
  .el-dialog__body {
    padding: 6px 16px 10px;
  }
}
</style>

调用这个组件的的业务逻辑 addDialog： 

<template>
  <base-dialog
    title="新增信息"
    width="60%"
    :visible="visible"
    :autoHeight="false"
    @open="handleOpen"
    @handleConfirm="handleConfirm"
    @close="handleClose"
  >
    <div class="body">
      aaaaaaaaaa
    </div>
  </base-dialog>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue'
import {
  AddKouKuanInfo,
} from '@/api/modules/personnelMana/deductionMana.js'
defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
})
const { proxy: ctx } = getCurrentInstance()

const handleClose = () => {
  baseFormRef.value.reset()
  emit('closeDialog')
}
// 弹窗弹出
const handleOpen = () => {
  // getAddFormOptions()
}


// 刷新表格事件
const emit = defineEmits(['refreshTable', 'closeDialog'])
// 添加
async function addDeductionInfo() {
  const { code, msg } = await AddKouKuanInfo()
  ctx.$message({
    type: code === 1 ? 'success' : 'warning',
    message: msg,
  })
  if (code === 1) {
    // 刷新表格
    emit('refreshTable')
    emit('closeDialog')
  }
}
// 点击确定
const handleConfirm = () => {
  addDeductionInfo()
}
</script>

<style lang="scss" scoped>
.body {
  height: 100%;
}
</style>

 在主页页面调用上面的 添加 dialog

<template>
  <Content>
    <template #topbar>
      <el-button type="primary" size="small" @click="showAddDialog"
        >添加</el-button
      >
    </template>
    <div class="content">
    </div>
    <!-- 新增 -->
    <AddDialog
      @closeDialog="addDialogShow = false"
      :visible="addDialogShow"
      @refreshTable="refreshTable"
    />
  </Content>
</template>

<script setup>
import { ref } from 'vue'
import AddDialog from './components/AddDialog.vue'

// 新增
const addDialogShow = ref(false)
const showAddDialog = () => {
  addDialogShow.value = true
}
// 刷新表格
const tableRef = ref(null)
const refreshTable = () => {
  tableRef.value.refresh()
}

</script>

<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>