Vue3 el-dialog 二次封装踩坑实录（v-model moduleValue 不触发）

本文主要是介绍Vue3 el-dialog 二次封装踩坑实录（v-model moduleValue 不触发），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如果你封装了一个el-dialog的子组件，想通过父组件v-model的形式调用，切记不能使用v-model，要使用 v-model:[你的参数]，例如 v-model:visible

<template><el-dialogv-model="dialogVisibale":title="title"width="800px"><el-card class="mb-5 mt-2">测试效果</el-card><template #footer><div class="dialog-footer"><el-button type="primary" @click="handleConfirm">确定</el-button></div></template></el-dialog>
</template><script setup>
import { ref, computed } from "vue"
const emits = defineEmits(['update:visible', 'listUpdate'])const props = defineProps({title: {type: String,default: '标题'},visible: {type: Boolean,default: false},
})
const dialogVisibale = computed({get() {return props.visible},set(val) {emits('update:visible', val)}
})const handleConfirm = () => {dialogVisibale.value = falseemits('listUpdate')
}// 取消
const handleClose = (done) => {dialogVisibale.value = false
}</script><style scoped lang="less"></style>

// 父组件
<template><el-button @click="handleAdd">打开dialog</el-button><staffing-dialog v-model:visible="dialogVisibale" @listUpdate="onSearch"/>
</template><script setup>
import staffingDialog from "./staffingDialog.vue";const dialogVisibale = ref(false);const handleAdd = () => {dialogVisibale.value = true;
}const onSearch() => {// 弹窗保存需要处理的逻辑
}