组件 v-model
v-model 可以在组件上使用以实现双向绑定 从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：
<!-- 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="count" />
defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：
-
它的 .value 和父组件的 v-model 的值同步；
-
当它被子组件变更了，会触发父组件绑定的值一起更新。
底层机制
defineModel 是一个便利宏。 编译器将其展开为以下内容：
-
一个名为 modelValue 的 prop，本地 ref 的值与其同步；
-
一个名为 update:modelValue 的事件，当本地 ref 的值发生变更时触发。
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>
如你所见，这显得冗长得多。然而，这样写有助于理解其底层机制。
因为 defineModel 声明了一个 prop，你可以通过给 defineModel 传递选项，来声明底层 prop 的选项：
// 使 v-model 必填
const model = defineModel({ required: true })
// 提供一个默认值
const model = defineModel({ default: 0 })
v-model 的参数
v-model 绑定一个变量参数
//子组件
<script lang="ts" setup>
import { ref } from 'vue'
const title = defineModel('title')
</script>
<template>
<div class="container">子组件 <input type="text" v-model="title" /></div>
</template>
<style lang="scss" scoped>
.container {
}
</style>
//父组件
<script lang="ts" setup>
import { ref } from 'vue'
import Mcom from '@/components/Mcom.vue'
const title = ref('v-model 参数')
</script>
<template>
<div class="container">
<h1>{{ title }}</h1>
<Mcom v-model:title="title" />
</div>
</template>
<style lang="scss" scoped>
.container {
}
</style>
如果还需要 prop 选项，则应该在模型名称之后传递它们
const title = defineModel('title', { required: true })
多个 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 有一些内置的修饰符，例如 .trim，.number 和 .lazy。
自定义v-model修饰符
我们来创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写：
//子组件
<script lang="ts" setup>
import { ref } from 'vue'
const [model, modifiers] = defineModel({
set(value) {
if (modifiers.capitalize) {
return value.charAt(0).toUpperCase() + value.slice(1)
}
return value
}
})
</script>
<template>
<div class="container">
<input type="text" v-model="model" />
</div>
</template>
<style lang="scss" scoped>
.container {
}
</style>
//父组件
<script lang="ts" setup>
import { ref } from 'vue'
import Com15 from '@/components/demo/Com15.vue'
const myText = ref('')
</script>
<template>
<div class="container">
<Com15 v-model.capitalize="myText"></Com15>
</div>
</template>
<style lang="scss" scoped>
.container {
}
</style>
要根据修饰符有条件地调整值的读取/写入方式，我们可以将get和set选项传递给defineModel().
这两个选项接收模型引用的 get/set 值，并应返回转换后的值。
这就是我们如何使用该set选项来实现capitalize修饰符：
