一篇文章带你掌握vue的双向数据绑定

v-model是Vue.js用于实现表单输入元素与组件数据双向绑定的指令。它通过自动监听input/change事件并同步数据，简化了表单处理流程。文章详细介绍了v-model的工作原理：在原生表单元素中自动选择合适的事件类型（如input用于文本输入，change用于复选框），在自定义组件中则通过props传递value和emit输入事件实现双向绑定。特别说明了如何通过model选项自定义pro

I'm兰陵王

831人浏览 · 2025-06-04 14:47:51

I'm兰陵王 · 2025-06-04 14:47:51 发布

在 Vue.js 中，v-model 是一个用于在表单元素和组件之间创建双向数据绑定的指令。它简化了数据同步的过程，使得开发者可以更方便地处理用户输入和状态更新。下面是对 v-model 的详细介绍，包括其工作原理、使用方法以及一些最佳实践。

一、基本概念

双向绑定：双向绑定意味着当用户在表单元素中输入数据时，数据会自动更新到 Vue 实例的数据模型中；反之，当 Vue 实例的数据模型发生变化时，表单元素中的显示也会自动更新。

二、工作原理

v-model 在 Vue 中主要用于表单元素（如 input、textarea、select）和自定义组件之间创建双向数据绑定。其核心机制是利用 Vue 的响应式系统和事件处理来实现数据的同步。

1. 表单元素的双向绑定

对于基本的表单元素，v-model 会根据元素的类型自动选择合适的同步方式。

文本输入 (input[type="text"])：
```
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
```
- 输入事件：监听 input 事件，实时同步输入框的内容到 message。
文本域 (textarea)：
```
<textarea v-model="message"></textarea>
<p>Message is: {{ message }}</p>
```
- 输入事件：监听 input 事件，同步文本域的内容到 message。

单选按钮 (input[type="radio"])：

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

改变事件：监听 change 事件，同步选中的单选按钮的值到 picked。

复选框 (input[type="checkbox"])：

单个复选框：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

改变事件：监听 change 事件，同步复选框的状态到 checked。

多个复选框绑定到数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<br>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<br>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

改变事件：监听 change 事件，将选中的复选框的值添加或移除到 checkedNames 数组中。

选择框 (select)：

单个选择：

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

改变事件：监听 change 事件，同步选中的选项值到 selected。

多个选择绑定到数组：

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

改变事件：监听 change 事件，将选中的选项值添加或移除到 selected 数组中。

三、自定义组件的双向绑定

v-model 也可以用于自定义组件，但需要一些额外的配置。自定义组件的双向绑定是通过 props 和 events 来实现的。

1. 基本用法

父组件：
```
<custom-input v-model="searchText"></custom-input>
```
- v-model 在父组件中会自动展开为 value 和 input 事件。

子组件：

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

<script>
export default {
  props: ['value']
};
</script>

value：子组件接收 value 属性。
input：子组件通过 $emit('input', $event.target.value) 触发输入事件，将新的值传递给父组件。

2. 修改 `v-model` 的默认行为

定义 model 选项：

<custom-input v-model="searchText"></custom-input>

子组件：

<template>
  <input
    :value="currentValue"
    @input="updateValue($event.target.value)"
  >
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      currentValue: this.value
    };
  },
  watch: {
    value(newVal) {
      this.currentValue = newVal;
    }
  },
  methods: {
    updateValue(value) {
      this.currentValue = value;
      this.$emit('input', value);
    }
  },
  model: {
    prop: 'value',
    event: 'input'
  }
};
</script>

model：通过 model 选项可以自定义 v-model 的 prop 和 event。

3. 使用多个 `v-model`

父组件：

<custom-component v-model:title="title" v-model:description="description"></custom-component>

子组件：

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

<script>
export default {
  props: ['title', 'description'],
  model: {
    prop: 'title',
    event: 'update:title'
  }
};
</script>

update:title 和 update:description：通过自定义事件来实现多个 v-model 的双向绑定。

四、使用 `v-model` 的最佳实践

使用明确的事件名：
- 为了代码的可读性和维护性，使用明确的事件名来触发 v-model 的更新。
- 例如，使用 update:title 而不是 input。
避免直接修改 props：
- 在子组件中不要直接修改 props，而是通过 $emit 触发事件来更新父组件的数据。
- 例如，使用 this.$emit('input', newValue) 而不是 this.value = newValue。

使用计算属性：

如果需要在子组件中处理 props，可以使用计算属性来创建一个响应式的中间变量。

例如：

computed: {
  currentValue: {
    get() {
      return this.value;
    },
    set(newValue) {
      this.$emit('input', newValue);
    }
  }
}

优化性能：
- 使用 key 属性来区分同一层级的不同节点，减少不必要的替换操作。
- 例如：
```
<div v-for="item in items" :key="item.id">
  <input v-model="item.text">
</div>
```
处理复杂组件：
- 对于复杂的组件，可以使用 model 选项来自定义 v-model 的 prop 和 event，以满足特定需求。
使用 .lazy 修饰符：
- 在某些情况下，使用 .lazy 修饰符可以减少输入事件的触发频率，提高性能。
- 例如：
```
<input v-model.lazy="message">
```
使用 .number 修饰符：
- 如果需要将输入值转换为数字，可以使用 .number 修饰符。
- 例如：
```
<input v-model.number="age">
```
使用 .trim 修饰符：
- 如果需要去除输入值的前后空格，可以使用 .trim 修饰符。
- 例如：
```
<input v-model.trim="message">
```

五、示例代码

以下是一个完整的 Vue 示例，展示了如何使用 v-model 实现双向绑定，并处理多个 v-model 以及自定义组件的双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue v-model Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <h1>v-model 示例</h1>
    <input v-model="message" placeholder="输入一些文字">
    <p>Message: {{ message }}</p>

    <h2>单选按钮</h2>
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>

    <h2>复选框</h2>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <br>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <br>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <br>
    <span>Checked names: {{ checkedNames }}</span>

    <h2>选择框</h2>
    <select v-model="selected">
      <option disabled value="">请选择一个选项</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>

    <h2>自定义组件的双向绑定</h2>
    <custom-input v-model="searchText"></custom-input>
    <p>搜索文本: {{ searchText }}</p>

    <h2>多个 v-model 的双向绑定</h2>
    <custom-component v-model:title="title" v-model:description="description"></custom-component>
    <p>标题: {{ title }}</p>
    <p>描述: {{ description }}</p>
  </div>

  <script>
    // 自定义组件 custom-input
    Vue.component('custom-input', {
      template: `
        <input
          :value="value"
          @input="$emit('input', $event.target.value)"
        >
      `,
      props: ['value']
    });

    // 自定义组件 custom-component
    Vue.component('custom-component', {
      template: `
        <div>
          <input
            :value="title"
            @input="$emit('update:title', $event.target.value)"
          >
          <textarea
            :value="description"
            @input="$emit('update:description', $event.target.value)"
          ></textarea>
        </div>
      `,
      props: ['title', 'description'],
      model: {
        prop: 'title',
        event: 'update:title'
      }
    });

    // 主应用
    new Vue({
      el: '#app',
      data: {
        message: '',
        picked: '',
        checkedNames: [],
        selected: '',
        searchText: '',
        title: '默认标题',
        description: '默认描述'
      }
    });
  </script>
</body>
</html>

六、解释

基本表单元素的双向绑定：
- 使用 v-model 绑定 input、textarea 和 select 元素到 Vue 实例的数据模型。
单选按钮和复选框的双向绑定：
- 使用 v-model 绑定单选按钮和复选框到 Vue 实例的数据模型。
- 通过 key 属性来区分同一层级的不同复选框。
自定义组件的双向绑定：
- 使用 v-model 绑定自定义组件 custom-input 到 Vue 实例的数据模型。
- 子组件通过 props 接收 value，并通过 $emit('input', $event.target.value) 触发输入事件。
多个 v-model 的双向绑定：
- 使用 v-model:title 和 v-model:description 绑定多个 v-model 到自定义组件 custom-component。
- 子组件通过自定义事件 update:title 和 update:description 来实现多个 v-model 的双向绑定。