如果你封装了一个el-dialog的子组件,想通过父组件v-model的形式调用,切记不能使用v-model,要使用 v-model:[你的参数],例如 v-model:visible文章来源地址https://www.toymoban.com/news/detail-859943.html
<template>
<el-dialog
v-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 = false
emits('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() => {
// 弹窗保存需要处理的逻辑
}
文章来源:https://www.toymoban.com/news/detail-859943.html
到了这里,关于Vue3 el-dialog 二次封装踩坑实录(v-model moduleValue 不触发)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!