Vue3的defineModels是干啥的？怎么用？和v - model有啥关系？

defineModels 是个啥？

defineModels 是Vue 3.3版本后新增的编译时宏，专门用来简化组件间“双向绑定”的写法，在这之前，写组件双向通信时，得同时用 defineProps 接收值、defineEmits 触发更新，操作繁琐，有了 defineModels 后，一行代码就能把这两个步骤合并，让组件双向绑定的实现变得更轻松。

和传统v - model写法比，好在哪？

我们通过“输入框组件双向传值”的例子，来感受新旧写法的区别：

旧写法（Vue3.3前）：

子组件需要同时声明props和emits，修改值时还要手动触发事件：

<script setup>
const props = defineProps(['modelValue']) // 接收父组件传的值
const emit = defineEmits(['update:modelValue']) // 声明更新事件
function handleInput(e) {
  emit('update:modelValue', e.target.value) // 手动触发更新
}
</script>
<template>
  <input :value="props.modelValue" @input="handleInput" />
</template>

新写法（用defineModels）：

直接解构 defineModels 的返回值，修改值时像修改普通变量一样赋值就行：

<script setup>
const { modelValue } = defineModels() // 自动处理props和emits
function handleInput(e) {
  modelValue = e.target.value // 直接赋值，自动触发更新
}
</script>
<template>
  <input :value="modelValue" @input="handleInput" />
</template>

可以看到，新写法减少了defineProps和defineEmits的声明，也不用手动写emit('update:xxx')，代码量减少了一半，逻辑也更内聚——不用在“接收值”和“触发更新”之间来回切换着写，维护起来更轻松。

实际开发中怎么用defineModels？

分三步走，结合例子理解更清晰：

步骤1：确认Vue版本

defineModels 是Vue 3.3+才有的特性，所以要先检查项目里Vue的版本（查看package.json中vue依赖的版本号），要是老项目，得先升级到3.3以上版本。

步骤2：在