vue3中封装el-dialog实现父子组件传值绑定

框架：vue3.0，ruoyi，element-plus
语言：ts

子组件

<el-dialog v-model="visible" @close="handleClose"></el-dialog>

<script setup lang="ts" name="UploadDialog">
const props = defineProps({
  modelValue: {
    type: boolean,
    default: false
  }
})
/** 弹框状态绑定 */
const emit = defineEmits(['update:modelValue']);
const visible = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emit("update:modelValue", newValue)
  }
})
/** 关闭弹框 */
const handleClose = () => {
  visible.value = false
}
</script>

父组件

<el-button @click="openDialog">文件上传</el-button>
<upload-dialog v-model:modelValue="dialogVisible"></upload-dialog>

<script setup lang="ts">
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
}
</script>