在defineComponent中使用defineModel时model值为undefined的问题

defineModel是Vue 3.4+推出的语法糖，在<script setup>中会自动处理props与emit的关联，但在defineComponent的setup函数中使用时，需要手动处理关键细节，否则会出现无法获取modelValue默认值的问题。

常见问题原因及解决办法 #

1. 未声明对应props导致绑定失败 #

defineModel依赖组件声明的modelValue props（或自定义名称的props）来关联父组件的v-model值。如果未在组件props中声明对应字段，defineModel无法正确绑定，返回的ref值就会是undefined，而未被声明为props的modelValue会被归入ctx.attrs中，所以你能在attrs里拿到值。

错误示例：

import { defineComponent, defineModel } from 'vue'

export default defineComponent({
  setup() {
    const model1 = defineModel()
    console.log(model1.value) // undefined
    return { model1 }
  }
})

正确写法：

import { defineComponent, defineModel } from 'vue'

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'], // 可省略，Vue 3.4+会自动推断，但显式声明更清晰
  setup() {
    const model1 = defineModel()
    console.log(model1.value) // 正常获取父组件传递的"1"
    return { model1 }
  }
})

2. 在setup外部调用defineModel #

defineModel必须在setup函数内部调用，它依赖当前组件的上下文环境（props、emit等）。如果在setup外调用，无法获取组件上下文，自然拿不到父组件传递的值。

3. 自定义model名称时未同步配置 #

如果父组件使用v-model:bar这种自定义绑定名，需要在defineModel中指定name参数，同时在props中声明对应的bar字段：

import { defineComponent, defineModel } from 'vue'

export default defineComponent({
  props: {
    bar: String
  },
  setup() {
    const model2 = defineModel({ name: 'bar' })
    return { model2 }
  }
})

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