Vue Academy · 课时

v-model：双向绑定的内部机制

v-model 会编译为 :modelValue + @update:modelValue、自定义 v-model 名称，以及在组件上使用 v-model。

v-model：双向绑定的内部机制 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

v-model 的真实含义

v-model 看起来像神奇的双向绑定，但实际上只是值绑定和事件监听器的简写。了解它展开后的形式后，您就能在输入框和自定义组件上使用它。

文本输入框中的 v-model

在原生输入框上，v-model 会绑定值并监听输入事件。这两行写法是等价的。

<!-- shorthand -->
<input v-model="text" />

<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />

两部分：绑定与监听

:value 会将状态写入元素；@input 会将用户的更改写回状态。两者结合后，就产生了双向绑定的效果。

组件上的 v-model 有所不同

在自定义组件上，v-model 使用不同的属性和事件：modelValue 和 update:modelValue。原生的 value/input 仅用于原生元素。

<!-- on a component -->
<MyInput v-model="text" />

<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />

在子组件中实现 v-model

要支持 v-model，子组件需要声明一个 modelValue 属性，并在值需要改变时触发 update:modelValue。

<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>

子组件模板

子组件将传入的属性绑定到输入框，并在值发生变化时触发事件。父组件无需了解内部细节。

<template>
  <input :value="modelValue" @input="onInput" />
</template>

v-model 的具名参数

您可以通过为模型命名来指定某个属性：v-model:title 使用属性 title 和事件 update:title。

<!-- parent -->
<MyDialog v-model:title="pageTitle" />

<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />

在子组件中声明具名模型

子组件只需声明一个同名的属性和对应事件即可。

<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>

一个组件中的多个 v-model

由于每个模型都有自己的名称，您可以同时绑定多个模型。例如，用户表单组件可以同时提供 v-model:first 和 v-model:last。

<UserName
  v-model:first="firstName"
  v-model:last="lastName"
/>

这种设计为何如此强大

由于 v-model 只是属性和事件的组合，自定义组件对于使用者来说会完全像原生输入框一样。多个具名模型还可以让一个组件简洁地管理多个双向绑定。

常见陷阱

请勿在子组件中直接修改 modelValue 属性，这会破坏单向属性数据流。请始终触发更新事件，并让父组件管理状态。

快速检查

请测试您对 v-model 内部机制的掌握情况。

回顾

您已经了解了 v-model 的工作方式：

在输入框上，它会展开为 :value + @input。
在组件上，它使用 modelValue + update:modelValue。
具名模型（v-model:title）会指定特定的属性和事件。
您可以在一个组件上使用多个 v-model。

常见问题解答

「v-model：双向绑定的内部机制」课时是免费的吗？

是的 — 「v-model：双向绑定的内部机制」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「v-model：双向绑定的内部机制」这节课中我会学到什么？

v-model 会编译为 :modelValue + @update:modelValue、自定义 v-model 名称，以及在组件上使用 v-model。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「v-model：双向绑定的内部机制」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy