基本用法

v-model 可以在组件上使用以实现双向绑定。

使用 defineModel()，返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用。

示例：

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

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

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

父组件可以用 v-model 绑定一个值。

示例：

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

1、子组件的 .value 和父组件的 v-model 的值同步；

2、当它被子组件变更了，会触发父组件绑定的值一起更新。

v-model 的参数

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

示例：

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

在子组件中，我们可以通过将字符串作为第一个参数传递给 defineModel() 来支持相应的参数。

示例：

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

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

多个 v-model 绑定

单个组件实例上创建多个 v-model 双向绑定。每一个 v-model 都会同步不同的 prop。

示例：

<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>

处理 v-model 修饰符

某些场景下，我们可能想要一个自定义组件的 v-model 支持自定义的修饰符。

未完。。。