vue3中v-model的绑定

Vue 3.x 自定义组件 v-model 使用

最新推荐文章于 2025-10-05 15:06:03 发布

原创最新推荐文章于 2025-10-05 15:06:03 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

vue3 专栏收录该内容

6 篇文章

订阅专栏

博客介绍了 Vue 3.x 中自定义组件上 v-model 的使用，它相当于传递 prop 并接收抛出的事件。还提到若要更改 v-model 名称，可传递参数作为组件内 model 选项的替代，也可替代.sync 修饰符，且允许在自定义组件上使用多个 v-model。

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

v-model 参数
若需要更改 model 的名称，现在我们可以为 v-model 传递一个参数，以作为组件内 model 选项的替代

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

在这里插入图片描述
这也可以作为 .sync 修饰符的替代，而且允许我们在自定义组件上使用多个 v-model。

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 是以下的简写： -->

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>