🎓 Vue 3 v-model（defineModel）完整总结 · 今日学习版

ChatGPT

⭐ 1. ref 与 .value

你学到了：

• Vue 的 ref() 创建响应式数据
• 在 <script setup> 中 必须用 .value 修改
• 在模板中可以省略 .value

const count = ref(0)
count.value++

---

⭐ 2. 父传子：Props（defineProps）

子组件接收父组件数据：

const props = defineProps({
  sendCount: Number
})

父组件：

<Child :send-count="count" />

---

⭐ 3. 子传父：Emit（defineEmits）

子组件触发事件通知父组件：

const emit = defineEmits(['update'])
emit('update', value)

父组件：

<Child @update="doSomething" />

---

⭐ 4. 单向数据流（One-way Data Flow）

你掌握了：

• 数据永远从父到子
• 子组件 不能直接修改父组件数据
• 子组件只能用 emit 请求父组件改数据

---

🎯 进入重点：v-model

⭐ 5. v-model 底层原理（最重要）

父组件写：

<Child v-model="count" />

其实等于：

<Child :modelValue="count" @update:modelValue="count = $event" />

---

⭐ 6. 子组件如何处理旧版 v-model？

你学会了 classic 写法：

const props = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])

模板：

<input :value="props.modelValue" @input="emits('update:modelValue', $event.target.value)" />

错误点你也掌握了：

❌ ' $event.target.value ' 加引号会变成字面量字符串

---

🚀 最新语法：defineModel（你今天的最大突破）

⭐ 7. 单字段 v-model（最简单用法）

父组件：

<Child v-model="count" />

子组件：

const model = defineModel()

模板：

<button @click="model++">Add {{ model }}</button>

---

⭐ 8. 多字段 v-model

父组件：

<UserCard v-model:name="name" v-model:age="age" />

子组件：

const modelName = defineModel('name')
const modelAge = defineModel('age')

你已经能正确写出：

• name = 文本输入框
• age = 点击按钮自增

---

🧩 修饰符（Modifiers）— 你终于彻底理解了

⭐ 9. v-model.upper=”username” 的原理

父组件：

<NameInput v-model.upper="username" />

Vue 自动转成：

<NameInput 
  :modelValue="username"
  @update:modelValue="username = $event"
  :modelModifiers="{ upper: true }"
/>

你不需要手写 modelModifiers。

defineModel 自动处理。

---

⭐ 10. 子组件通过 defineModel 的 set() 处理修饰符

const model = defineModel({
  set(value) {
    return value.toUpperCase()
  }
})

如果父组件用了 .upper 才会触发 set() 没写 .upper 就不触发。

---

🧠 今日最重要的“金句总结”

✅ 1. v-model 本质 = props + emit 的语法糖

✅ 2. defineModel = 最新版、最简写方式

✅ 3. $event.target.value 不能加引号

✅ 4. 修饰符 .upper 的本质是 “告诉子组件使用 set()”

✅ 5. 子组件不需要写 upper、trim 等字段，Vue 自动传入

✅ 6. defineModel 让 v-model 更像 React 中单向数据流（可控组件）

✅ 7. 父组件永远是数据来源（单向数据流）

---

📝 要复习的代码模板（必背）

① 单字段 v-model

父：

<Child v-model="count" />

子：

const model = defineModel()

---

② 多字段 v-model

父：

<Child v-model:title="title" v-model:value="value" />

子：

const title = defineModel('title')
const value = defineModel('value')

---

③ 自定义修饰符

父：

<NameInput v-model.upper="username" />

子：

const model = defineModel({
  set(value) {
    return value.toUpperCase()
  }
})

---

💯 你今天掌握的内容已经超过大多数入门者

你学会了：

• Vue3 核心响应式
• props
• emit
• 单向数据流
• 旧版 v-model
• 新版 defineModel
• 多字段 v-model
• 自定义修饰符
• set() 数据转换
• 常见错误调试（’$event.target.value’）

这套内容几乎是前端工程师面试 Vue3 必考题。

你学得非常扎实！

---