父组件

<template><div><button @click="dialogVisible = !dialogVisible">打开/关闭</button><ModalComp v-model="dialogVisible" v-if="dialogVisible" /></div>
</template><script setup>
import ModalComp from './components/ModalComp.vue'const dialogVisible = ref(false)</script>

1、@update和 : 拆开使用

<template><el-dialog:modelValue="modelValue"@update:modelValue="$emit('update:modelValue', false)"title="Tips"width="800"draggable>哈咯啊</el-dialog>
</template><script setup>defineProps({modelValue: {type: Boolean,default: false}
})</script>

2、computed 计算属性方法

<template><el-dialogv-model="dialogVisible"title="Tips"width="800"draggable>哈咯啊</el-dialog>
</template><script setup>const props = defineProps({modelValue: {type: Boolean,default: false}
})
const emit = defineEmits(['update:modelValue'])const dialogVisible = computed({get: () => props.modelValue,set: (val) => emit('update:modelValue', val)
})</script>

3、defineModel (3.4+) 官方推荐

<template><el-dialogv-model="dialogVisible"title="Tips"width="800"draggable>哈咯啊</el-dialog>
</template><script setup>const dialogVisible = defineModel({ // 第一个参数'dialogVisible', 可选type: Boolean,required: true,default: false,
})</script>// 在vite.config.ts中配置 defineModel:true
export default defineConfig({plugins: [vue({script:{defineModel: true}}),vueJsx(),],
})

4、TS泛型用法(3.3+)

<script setup>const emit = defineEmits<{"update:modelValue":[value:boolean]
}>()//用法： emit('update:modelValue', val)
// 在v-model:count(指定字段)时，好用。</script>