组件 v-model

基本用法

• v-model 可以在组件上使用以实现双向绑定。
• 从 Vue 3.4 开始，推荐的实现方式是使用 defineModel()
• 例如
• 父组件：

<!-- Parent.vue -->
<Child v-model="countModel" />

• 子组件

<!-- Child.vue -->
<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

<template>
  <div>Parent bound v-model is: {{ model }}</div>
</template>

v-model 的参数

• 组件上的 v-model 也可以接受一个参数：

<MyComponent v-model:title="bookTitle" />

<!-- MyComponent.vue -->
<script setup>
const title = defineModel('title')
</script>

<template>
  <input type="text" v-model="title" />
</template>

多个 v-model 绑定

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

<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>