深入解析 Vue 3 中的 `v-model` 与相关知识点

一、引言

在 Vue.js 中，v-model 是一个双向绑定的核心指令，通常用于在表单控件（如输入框、复选框、单选框等）中绑定用户输入与组件的状态。Vue 3 中对 v-model 做了显著改进，使其更灵活和易于扩展。

本文将详细介绍 Vue 3 中 v-model 的使用方法、工作原理、参数化应用，以及如何在自定义组件中实现 v-model 的功能。文章将以 语法糖 编写示例代码，便于大家理解和直接应用。

二、`v-model` 基础用法

1. 用于表单元素

在 Vue 3 中，v-model 的基础用法与 Vue 2 相同，依然用于绑定表单控件的值：

<script setup>
import { ref } from 'vue'

const textInput = ref('')
const isChecked = ref(false)
</script>

<template>
  <div>
    <label>
      文本输入：
      <input v-model="textInput" type="text" />
    </label>
    <p>你输入的内容是：{{ textInput }}</p>

    <label>
      勾选框：
      <input v-model="isChecked" type="checkbox" />
    </label>
    <p>是否勾选：{{ isChecked }}</p>
  </div>
</template>

输出说明：

v-model 会自动绑定输入框的 value 属性，并侦听 input 事件。
对于复选框，则会绑定 checked 属性，并侦听 change 事件。

三、`v-model` 在 Vue 3 中的改进

1. 多个绑定值（参数化）

在 Vue 2 中，一个组件只能绑定一个 v-model 值。但在 Vue 3 中，v-model 支持多个绑定值，通过 参数化 实现：

<script setup>
import { ref } from 'vue'

const title = ref('默认标题')
const content = ref('这里是内容')
</script>

<template>
  <CustomEditor v-model:title="title" v-model:content="content" />
  <p>标题：{{ title }}</p>
  <p>内容：{{ content }}</p>
</template>

自定义组件代码：

<script setup>
import { defineProps, defineEmits } from 'vue'

defineProps(['modelValue', 'modelModifiers', 'title', 'content'])
const emit = defineEmits(['update:title', 'update:content'])
</script>

<template>
  <div>
    <input
      :value="title"
      @input="event => emit('update:title', event.target.value)"
      placeholder="编辑标题"
    />
    <textarea
      :value="content"
      @input="event => emit('update:content', event.target.value)"
      placeholder="编辑内容"
    ></textarea>
  </div>
</template>

2. 可自定义的绑定事件

默认情况下，v-model 会使用 update:<prop> 的事件形式。例如上例中的 update:title 和 update:content。开发者可以随意定义事件名称。

四、自定义组件中的 `v-model`

开发者可以在自定义组件中，灵活地支持 v-model，以下是具体实现步骤。

1. 单一值绑定

<script setup>
import { defineProps, defineEmits } from 'vue'

defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

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

使用示例：

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'

const inputValue = ref('')
</script>

<template>
  <CustomInput v-model="inputValue" />
  <p>输入的值是：{{ inputValue }}</p>
</template>

2. 多个值绑定

通过 props 和 emit 配合实现多个值绑定。

<script setup>
import { defineProps, defineEmits } from 'vue'

defineProps(['title', 'content'])
const emit = defineEmits(['update:title', 'update:content'])
</script>

<template>
  <div>
    <input
      :value="title"
      @input="event => emit('update:title', event.target.value)"
    />
    <textarea
      :value="content"
      @input="event => emit('update:content', event.target.value)"
    ></textarea>
  </div>
</template>

五、修饰符的使用

Vue 3 的 v-model 支持修饰符，用于处理输入值的格式化。例如：

1. `.trim` 修饰符

用于去除用户输入的首尾空格。

<script setup>
import { ref } from 'vue'

const username = ref('')
</script>

<template>
  <input v-model.trim="username" placeholder="请输入用户名" />
  <p>用户名：{{ username }}</p>
</template>

2. `.number` 修饰符

将输入值自动转为数字。

<script setup>
import { ref } from 'vue'

const age = ref(0)
</script>

<template>
  <input v-model.number="age" type="number" />
  <p>你的年龄是：{{ age }}</p>
</template>

3. `.lazy` 修饰符

延迟到 change 事件触发时更新绑定值。

<script setup>
import { ref } from 'vue'

const message = ref('')
</script>

<template>
  <input v-model.lazy="message" placeholder="请输入内容" />
  <p>最终内容：{{ message }}</p>
</template>

六、`v-model` 的工作原理

Vue 3 中的 v-model 本质上是语法糖。它等效于以下形式：

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

这使得开发者无需手动绑定 value 和侦听 input 事件，而是通过简洁的语法直接实现双向绑定。

七、总结

Vue 3 中的 v-model 不仅继承了 Vue 2 的强大功能，还增强了灵活性和可扩展性，特别是在多绑定值和自定义组件场景下，提供了更直观的实现方式。

本文介绍了 v-model 的基础用法、参数化功能、自定义组件支持、修饰符应用以及工作原理，并配有代码示例，旨在帮助开发者快速掌握 Vue 3 的 v-model。希望这篇文章能为你带来帮助，欢迎大家留言交流！