Vue中的v-model指令的基本使用及详解

基本使用

在使用Vue时，我们常常会使用v-model来进行双向数据绑定。。它可以用于在表单元素（如input、select、textarea等）上创建双向数据绑定。通过使用v-model指令，可以将表单元素的值绑定到Vue实例的数据属性，并且在用户输入时自动更新数据属性的值。使用v-model指令可以简化数据绑定的过程，使得在Vue中实现双向数据绑定变得更加直观和简单。

v-model搭配表单元素的基本使用：

javascript 复制代码

// 1. 对于文本框和多行文本框 v-model 绑定的是输入框的值
    const inpVal = ref() // 所输入的值
    <input type="text" v-model="inpVal" />

// 2.对于单选框 v-model绑定的是选中的值或布尔值
    const radioVal = ref() // 选中的value值 无value值，则绑定值为布尔值
    <input type="radio" v-model="radioVal" value="男" />
    <input type="radio" v-model="radioVal" value="女" />

// 3.对于复选框 v-model绑定的是选中的值的数组或布尔值
    const checkboxVal = ref([]) // 为所选中的value的数组
    const checkboxVal = ref() // 为是否选中的布尔值
    <input type="checkbox" v-model="checkboxVal" value="吃饭" />
    <input type="checkbox" v-model="checkboxVal" value="睡觉" />
    <input type="checkbox" v-model="checkboxVal" value="打豆豆" />

// 4.对于下拉选择框 v-model绑定的是选中的value值
    const selectVal = ref() // 所选择的value的值
    <select v-model="selectVal">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

v-model详解

Vue2中的v-model

v-model 其实是一个语法糖，在Vue2中这背后其实做了两个操作：

v-bind 绑定一个 value 属性
v-on 指令给当前元素绑定 input 事件

此时我们可以根据这样的方法来自己进行v-model的实现

javascript 复制代码

// 在普通表单元素中使用
<input v-bind:value="inpVal" v-on:input="inpVal = $event.target.value">
// 当input接收到新的输入，就会触发input事件，将事件目标的value 值赋给绑定的元素


// 在组件中使用
<my-component v-bind:value='inpVal' v-on:input='inpVal = arguments[0]' />
// 这时候，inpval接受的值就是input是事件的回掉函数的第一个参数
// 所以在自定义的组件当中，要实现数据绑定，还需要使用[$emit]去触发input的事件。
this.$emit('input', value)

Vue3中的v-model

在Vue3中在组件中使用v-model相比于vue2，实现发生了变化

父组件

javascript 复制代码

// 相比于vue2方法名和数据名发生了变化
<Child
  :modelValue="val"
  @update:modelValue="val = $event"
/>
// 相当于 <Child v-model = "val" />

子组件

javascript 复制代码

// 在子组件则要接收所收到的值及方法
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>