vue3入门教程：组件v-model

一、`v-model`的基本工作原理

v-model在Vue中主要用于实现数据的双向绑定，即当表单元素或组件的输入值发生变化时，会自动更新绑定的数据属性；反之，当数据属性发生变化时，也会自动更新表单元素或组件的显示。

二、在组合式API中使用`v-model`

在Vue 3的组合式API中，v-model的使用方式与传统选项式API有所不同。以下是一些关键点：

defineModel()宏：
- 从Vue 3.4开始，推荐使用defineModel()宏来简化组件上的双向绑定。
- defineModel()返回的值是一个ref，它可以像其他ref一样被访问和修改，同时能在父组件和当前变量之间实现双向绑定。
- 编译器会将defineModel()宏展开为一个名为modelValue的prop和一个名为update:modelValue的事件。
基本用法：
- 在子组件中，使用defineModel()来定义一个与父组件双向绑定的变量。
- 在父组件中，使用v-model指令将该变量绑定到子组件上。

三、`v-model`的参数化

在Vue 3中，v-model支持参数化，这意味着可以在一个组件上绑定多个v-model。这通常用于自定义组件，其中可能需要同步多个prop。

在子组件中，可以通过将字符串作为第一个参数传递给defineModel()来支持参数化的v-model。
在父组件中，使用v-model:参数名="变量名"的语法来绑定多个v-model。

四、自定义修饰符

Vue 3中的v-model还支持自定义修饰符，这可以用于在绑定过程中对值进行格式化或转换。

在子组件中，通过解构defineModel()的返回值来访问修饰符。
在父组件中，使用.修饰符名的语法来应用自定义修饰符。

五、示例代码

以下是一个使用组合式API和v-model的示例代码：

<!-- Child.vue -->
<template><div><input :value="model.value" @input="model.value = $event.target.value" /></div>
</template><script setup>
import { defineModel } from 'vue';const model = defineModel();// 或者，如果需要使用自定义的prop名称和事件名称：
// const model = defineModel('myProp', 'update:myProp');// 处理自定义修饰符（如果需要）
const [modelValue, modifiers] = defineModel({set(value) {if (modifiers.capitalize) {return value.charAt(0).toUpperCase() + value.slice(1);}return value;}
});
</script>

<!-- Parent.vue -->
<template><div><Child v-model="message" /><p>你输入的内容是: {{ message }}</p></div>
</template><script setup>
import { ref } from 'vue';
import Child from './Child.vue';const message = ref('');
</script>

在这个例子中，Child组件和Parent组件之间通过v-model实现了双向数据绑定。用户在Child组件的输入框中输入的内容会自动更新Parent组件中的message变量，反之亦然。