vue3组件传参之v-model

小秦学加瓦chen

于 2024-06-25 21:47:05 发布

阅读量621

点赞数 5

文章标签： ui

本文链接：https://blog.csdn.net/qh1112/article/details/139970235

版权

1、v-model的作用

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

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

双向数据绑定：v-model允许表单元素（如input、textarea、select等）的值与其在Vue实例中的数据属性进行双向绑定。这意味着，当用户在表单元素中进行输入时，Vue实例中的对应数据属性会自动更新；反之，如果Vue实例中的数据属性发生变化，表单元素的值也会相应更新。
简化操作：v-model是v-bind和v-on的语法糖，即它是这两个指令的简洁写法。在表单元素上使用v-model，Vue会自动处理value属性和input事件的绑定，使得开发者无需手动编写这些绑定代码。
适用于多种表单元素：v-model不仅适用于input元素，还适用于checkbox、radio button以及select等表单元素。例如，在input元素上使用v-model可以绑定文本输入值；在checkbox上使用v-model可以绑定复选框的选中状态；在select元素上使用v-model可以绑定选择框的选中值。
修饰符的使用：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>