vue3组件传参之v-model

1、v-model的作用

v-model 是 vue 的一个指令，用于在表单控件或组件上创建双向数据绑定。

v-model的作用主要体现在以下几个方面：

1. 双向数据绑定：v-model允许表单元素（如input、textarea、select等）的值与其在Vue实例中的数据属性进行双向绑定。这意味着，当用户在表单元素中进行输入时，Vue实例中的对应数据属性会自动更新；反之，如果Vue实例中的数据属性发生变化，表单元素的值也会相应更新。

2. 简化操作：v-model是v-bind和v-on的语法糖，即它是这两个指令的简洁写法。在表单元素上使用v-model，Vue会自动处理value属性和input事件的绑定，使得开发者无需手动编写这些绑定代码。

3. 适用于多种表单元素：v-model不仅适用于input元素，还适用于checkbox、radio button以及select等表单元素。例如，在input元素上使用v-model可以绑定文本输入值；在checkbox上使用v-model可以绑定复选框的选中状态；在select元素上使用v-model可以绑定选择框的选中值。

4. 修饰符的使用：v-model还支持一些修饰符，如lazy、number、trim等，这些修饰符可以进一步控制数据绑定的行为。例如，lazy修饰符可以使得数据更新不是实时进行的，而是在输入框失去焦点时才进行更新；number修饰符可以将用户的输入自动转换为数值类型；trim修饰符可以自动过滤用户输入的首尾空白字符。

2、v-model使用在自定义组件上

         除了表单元素外，v-model还可以用于自定义组件上。当v-model用于自定义组件时，Vue会自动生成一个value属性和input事件，使得父组件可以通过v-model向子组件传递数据并进行双向绑定。

        我们首先自定义一个组件实现输入框：

<template><input type="test"/>
</template><script setup lang="ts" name="HbnuInput"></script><style scoped>
input{height:35px;width:200px;outline: none;border:none;list-style: none;background-color: white;border-radius:15px;padding-left: 15px;color:grey;font-family:Arial, Helvetica, sans-serif;font-size: 16px;
}
</style>

当我们使用自定义 input 组件进行数据的双向绑定时：

        我们编写的程序：

<HbnuInput v-model="input"/>

        vue底层代码：

<HbnuInput :modelValue="input" @update:modelValue="input = $event"/>

那么此时就涉及到组件之间的传参，此时数据并没有真正的绑定到组件中，所以需要在组件中接收并传递参数

<template><input type="test" :value="modelValue"@input="$emit('update:modelValue',(<HTMLInputElement>$event.target).value)"/>
</template><script setup lang="ts" name="HbnuInput">defineProps(['modelValue'])const emit = defineEmits(['update:modelValue'])</script>