【Vue】深入理解 `v-model` 指令：实现数据双向绑定的终极指南

在 Vue.js 中，v-model 指令是实现数据双向绑定的核心工具。它使得视图与数据之间的同步变得简单高效。本文将详细介绍 v-model 的基本用法、常见场景、工作原理以及高级用法，帮助你全面掌握这一重要指令。

一、v-model 指令概述

v-model 是 Vue.js 中用于实现双向数据绑定的指令。通过 v-model，可以将表单元素的值与 Vue 实例的数据进行绑定，使得视图与数据保持同步。使用 v-model 指令时，Vue 会自动处理输入框的值与数据模型之间的同步更新，简化了表单处理的复杂度。

基本语法

v-model 的基本语法如下：

<input v-model="message" />

在这个示例中，v-model 绑定了 message 数据属性。当用户在输入框中输入内容时，message 数据属性的值会自动更新；反之，当 message 数据属性的值发生变化时，输入框中的内容也会同步更新。

二、v-model 的基本用法

1. 绑定输入框的值

最常见的 v-model 用法是绑定文本输入框的值。例如：

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

<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}
</script>

在这个例子中，输入框的值和 username 数据属性之间存在双向绑定。输入框中的内容变化会更新 username，而 username 的变化也会反映在输入框中。

2. 绑定多行文本框的值

对于多行文本框（<textarea>），v-model 的用法与单行输入框类似：

<template>
  <div>
    <textarea v-model="message" placeholder="请输入留言"></textarea>
    <p>留言内容：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

3. 绑定复选框

对于复选框，v-model 可以与布尔值绑定：

<template>
  <div>
    <input type="checkbox" v-model="checked">
    <p>是否选中：{{ checked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

当复选框被选中时，checked 的值会变为 true，否则为 false。

4. 绑定单选框

对于单选框（<input type="radio">），v-model 绑定到一个数据属性，这个属性的值将是被选中的单选框的 value 值。例如：

<template>
  <div>
    <label>
      <input type="radio" value="option1" v-model="picked"> 选项 1
    </label>
    <label>
      <input type="radio" value="option2" v-model="picked"> 选项 2
    </label>
    <p>选中的选项：{{ picked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picked: ''
    }
  }
}
</script>

5. 绑定选择框

v-model 也可以与 <select> 元素绑定：

<template>
  <div>
    <select v-model="selected">
      <option disabled value="">请选择一个选项</option>
      <option value="option1">选项 1</option>
      <option value="option2">选项 2</option>
    </select>
    <p>选择的值：{{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    }
  }
}
</script>

三、v-model 的工作原理

v-model 实现双向绑定的核心原理包括以下几个方面：

1. 数据绑定：v-model 将视图中的表单控件的值绑定到 Vue 实例的数据属性。
2. 事件监听：v-model 监听用户对表单控件的输入事件（例如 input 事件），并在用户输入时自动更新数据属性的值。
3. 更新视图：当数据属性的值发生变化时，v-model 自动更新表单控件的值，确保视图和数据的同步。

四、v-model 的高级用法

1. 自定义组件中的 v-model

在自定义组件中使用 v-model 时，可以通过 model 选项定义组件的 v-model 绑定属性。例如：

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

<script>
export default {
  props: {
    value: String
  }
}
</script>

在这个示例中，自定义组件将 value 作为 v-model 绑定的属性，并通过 $emit('input', ...) 触发 input 事件，将输入的值传递给父组件。

模板部分 (<template>)

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

• <input :value="value"：这是一个标准的 HTML 输入框元素。通过 :value="value"（即 v-bind:value="value"），将组件的 value 属性绑定到输入框的值。这样，输入框的显示值将根据 value 数据属性的变化而更新。
• @input="$emit('input', $event.target.value)"：这是一个事件监听器，用于处理输入框的 input 事件。当用户在输入框中输入内容时，触发 input 事件。$emit('input', $event.target.value) 将 input 事件向父组件发射，并传递输入框的当前值 $event.target.value 作为参数。这是实现 v-model 双向绑定的关键。

脚本部分 (<script>)

<script>
export default {
  props: {
    value: String
  }
}
</script>

• props: { value: String }：在自定义组件中定义了一个 value 属性，这个属性用于接收父组件传递的数据。value 是 v-model 默认的绑定属性名称，类型为 String。

2. 多重 v-model

Vue 3 支持在同一组件上使用多个 v-model。可以通过 model 选项定义不同的绑定属性名。例如：

<template>
  <div>
    <input v-model:title="title" v-model:content="content">
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  },
  emits: ['update:title', 'update:content']
}
</script>

在这个示例中，v-model:title 和 v-model:content 分别绑定到 title 和 content 数据属性。

五、v-model 的注意事项

1. 控制与非控制组件

v-model 只能用于控制组件，不能用于非控制组件。控制组件具有受控的 value 属性和 input 事件。

2. 避免双重绑定

确保在同一个表单控件上只使用一个 v-model 绑定，避免出现双重绑定的情况。

3. 自定义事件命名

自定义组件中的 v-model 使用 input 事件作为默认事件，但可以通过 model 选项自定义事件名称，以适应不同的需求。

---