Vue.js中：同时用defineProps与defineModel定义modelValue是否正确？

你这种同时在TextFieldCompProps里声明modelValue，又搭配defineModel使用的写法是错误的，会导致modelValue prop被重复声明，引发运行时警告甚至逻辑冲突。

正确的写法是只在TextFieldCompProps里定义非双向绑定的属性（比如你的required），双向绑定的modelValue完全交给defineModel处理：

<script setup lang="ts">
type TextFieldCompProps = {
  required?: boolean;
}

defineProps<TextFieldCompProps>()
// defineModel会自动注册modelValue prop，同时配置required: true
const modelValue = defineModel<string>({ required: true })
</script>

原因说明 #

defineModel是Vue 3.3+提供的语法糖，它会自动完成三件事：

• 声明modelValue作为组件的prop
• 声明update:modelValue事件
• 返回一个可写的ref，修改该ref的值时会自动触发update:modelValue事件实现双向绑定

如果手动在defineProps里再声明modelValue，就等于重复定义了同一个prop，不符合Vue组件规范。另外，defineModel的配置项（比如{ required: true }）会直接作用于自动生成的modelValue prop，无需额外在类型里声明它的必填性。

内容的提问来源于stack exchange，提问作者Erick Ishimine