在 Vue 3 中，
v-model 指令的使用更加灵活，可以绑定任意属性和事件。例如，我们可以使用
v-model:checked 指令来绑定单选框或复选框的
checked 属性，使用
v-model:my-prop 来绑定自定义组件的
my-prop 属性。
1. 基本使用
同时，Vue3 中的组合式 API 也为自定义组件的 v-model 提供了更好的支持。我们可以使用 modelValue 和 update:modelValue 两个参数来定义组件的 v-model，例如：
// MyComponent.vue
<template>
<div>
<input :value="props.modelValue" @input="updateValue" />
<span>子组件：{
{ props.modelValue }}</span>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
modelValue: String,
});
let emit = defineEmits(["update:modelValue"]);
const updateValue = (event: any) => {
emit("update:modelValue", event.target.value);
};
</script>
在上面的例子中，我们使用 modelValue 属性来接收父组件传递的值，并在输入框的 input 事件中使用 update:modelValue 事件来更新父组件的值。在父组件中，我们可以使用 v-model 指令来绑定这个自定义组件：
// parent.vue
<template>
<div>
<my-component v-model="data"></my-component>
</div>
</template>
<script setup lang="ts">
import {
ref } from "vue";
import MyComponent from "./components/MyComponent.vue";
const data = ref("hello word");
</script>
需要注意的是，使用 v-model 指令绑定自定义组件时，组件需要定义 modelValue 和 update:modelValue 两个属性。另外，v-model 指令在绑定自定义组件时，会自动将组件的 modelValue 属性作为 value 属性绑定，因此，在自定义组件的模板中，需要使用 value 属性来绑定输入框的值。
2. 使用conputed实现
另一种在组件内实现v-model的方式是使用一个可写的，同时具有getter和setter的computed属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件：
// MyComponent.vue
<template>
<div>
<input v-model="value" />
<span>子组件：{
{ props.modelValue }}</span>
</div>
</template>
<script setup lang="ts">
import {
computed } from "vue";
const props = defineProps({
modelValue: String });
let emit = defineEmits(["update:modelValue"]);
const value = computed({
get() {
return props.modelValue;
},
set(value) {
emit("update:modelValue", value);
},
});
</script>
3. v-model 的参数
默认情况下，v-model在组件上都是使用modelValue作为 prop，并以update:modelValue作为对应的事件。我们可以通过给v-model指定一个参数来更改这些名字：
// parent.vue
<template>
<div>
<my-component v-model:test="data"></my-component>
</div>
</template>
<script setup lang="ts">
import {
ref } from "vue";
import MyComponent from "./components/MyComponent.vue";
const data = ref("hello word");
</script>
子组件接收 test（就是之前的modelValue） 值，通过update:test更新父组件传递的数据：
// MyComponent.vue
<template>
<div>
<input :value="props.test" @input="updateValue" />
<span>子组件：{
{ props.test }}</span>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
test: String });
let emit = defineEmits(["update:test"]);
// 3.使用自定义参数
const updateValue = (event: any) => {
emit("update:test", event.target.value);
};
</script>
4. 多 v-model 的使用
通过v-model可以传递参数的特性，我们可同时使用多个 v-model，示例如下：
// parent.vue
<template>
<div>
<my-component v-model:hello="hello" v-model:word="word"></my-component>
</div>
</template>
<script setup lang="ts">
import {
ref } from "vue";
import MyComponent from "./components/MyComponent.vue";
const hello = ref("hello");
const word = ref("word");
</script>
父组件使用多个 v-model，子组件可以接收多个参数并修改
// MyComponent.vue
<template>
<div>
<input :value="props.hello" @input="updateHello" />
<span>子组件：{
{ props.hello }}</span>
<br />
<input :value="props.word" @input="updateWord" />
<span>子组件：{
{ props.word }}</span>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
hello: String, word: String });
let emit = defineEmits(["update:hello", "update:word"]);
// 4.使用多v-model
const updateHello = (event: any) => {
emit("update:hello", event.target.value);
};
const updateWord = (event: any) => {
emit("update:word", event.target.value);
};
</script>
5. v-model 修饰符
vue 官方提供了一些修饰符（如trim、number等等），但有时候我们可能需要一些特殊的功能，那么就可以使用自定义的修饰符来解决问题，如下：
<my-component v-model.mySplit="data"></my-component>
父组件传递的修饰符，可以在子组件中通过modelModifiers访问到：
// MyComponent.vue
<template>
<div>
<input :value="props.modelValue" @input="updateModelValue" />
<span>子组件：{
{ props.modelValue }}</span>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
modelValue: String,
modelModifiers: {
default: () => {
} },
});
// console.log(props.modelModifiers); // {mySplit: true}
let emit = defineEmits(["update:modelValue"]);
// 5.使用v-model修饰符
const updateModelValue = (event: any) => {
emit("update:modelValue", event.target.value);
};
</script>
在子组件中通过modelModifiers访问到传递的修饰符，那么我们就可以在用户每次输入时将输入内容变成数组：
// parent.vue
<template>
<div>
<my-component
v-model.mySplit="data"
v-model:title.mySplit="title"
></my-component>
</div>
</template>
<script setup lang="ts">
import {
ref } from "vue";
import MyComponent from "./components/MyComponent.vue";
const data = ref<string>("");
const title = ref<string>("");
</script>
// MyComponent.vue
<template>
<div>
<input type="text" :value="props.modelValue" @input="updateModelValue" />
<span>子组件：{
{ props.modelValue }}</span>
<hr />
<input type="text" :value="props.title" @input="updateTitle" />
<span>子组件：{
{ props.title }}</span>
</div>
</template>
<script setup lang="ts">
type Props = {
modelValue?: string;
modelModifiers?: {
mySplit: boolean };
title?: string;
titleModifiers?: {
mySplit: boolean };
};
const props = defineProps<Props>();
let emit = defineEmits(["update:modelValue", "update:title"]);
// 5.使用v-model修饰符
const updateModelValue = (event: any) => {
let value = event.target.value;
console.log(value, "value");
if (props.modelModifiers?.mySplit) {
value = value.split("");
}
emit("update:modelValue", value);
};
const updateTitle = (event: any) => {
let value = event.target.value;
if (props.titleModifiers?.mySplit) {
value = value.split("");
}
emit("update:title", value);
};
</script>
注意：未给v-model传递参数，默认使用 modelModifiers , 如果传递了参数，那就用 参数 +Modifiers