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>