Vue.js v-model 组件[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

v-model 是 Vue.js 中的一个重要指令，用于在表单输入元素（如 `<input>`、`<textarea>`、`<select>`）和组件上实现双向数据绑定。它本质上是语法糖，结合了 `v-bind` 和 `v-on` 的功能，简化了表单处理逻辑。在组件中使用 `v-model` 时，它允许父组件和子组件之间进行双向数据传递，使得数据流更加清晰和高效。

基本语法[编辑 | 编辑源代码]

在原生 HTML 元素上，`v-model` 的用法如下：

<input v-model="message" placeholder="请输入内容">
<p>输入的内容是：{{ message }}</p>

在 Vue 组件中，`v-model` 的默认行为是： - 将 `value` prop 绑定到父组件的数据。 - 在子组件中通过 `input` 事件更新父组件的数据。

自定义组件的 v-model[编辑 | 编辑源代码]

从 Vue 2.2.0 开始，可以在组件上使用 `v-model`，并通过 `model` 选项自定义 prop 和事件名称。

示例：自定义输入组件[编辑 | 编辑源代码]

以下是一个自定义输入组件的例子，展示如何在组件中使用 `v-model`：

<!-- 父组件 -->
<template>
  <div>
    <custom-input v-model="username"></custom-input>
    <p>用户名：{{ username }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: { CustomInput },
  data() {
    return {
      username: ''
    };
  }
};
</script>

<!-- 子组件 CustomInput.vue -->
<template>
  <input
    type="text"
    :value="value"
    @input="$emit('input', $event.target.value)"
    placeholder="请输入用户名"
  >
</template>

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

输出说明[编辑 | 编辑源代码]

- 用户在输入框中输入内容时，子组件通过 `$emit('input')` 触发事件。 - 父组件的 `v-model` 监听 `input` 事件，并更新 `username` 数据。 - 更新后的数据通过 `value` prop 传递回子组件，实现双向绑定。

Vue 3 中的 v-model 改进[编辑 | 编辑源代码]

在 Vue 3 中，`v-model` 的行为有所调整： 1. 默认使用 `modelValue` 作为 prop 名称，而非 `value`。 2. 默认使用 `update:modelValue` 作为事件名称，而非 `input`。

示例：Vue 3 的 v-model[编辑 | 编辑源代码]

<!-- 父组件 -->
<template>
  <custom-input v-model="username"></custom-input>
</template>

<!-- 子组件 CustomInput.vue -->
<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  >
</template>

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

高级用法：多个 v-model 绑定[编辑 | 编辑源代码]

Vue 3 支持在单个组件上绑定多个 `v-model`，这在复杂表单场景中非常有用。

示例：多个 v-model[编辑 | 编辑源代码]

<!-- 父组件 -->
<template>
  <user-form
    v-model:name="userName"
    v-model:email="userEmail"
  ></user-form>
</template>

<!-- 子组件 UserForm.vue -->
<template>
  <div>
    <input
      type="text"
      :value="name"
      @input="$emit('update:name', $event.target.value)"
    >
    <input
      type="email"
      :value="email"
      @input="$emit('update:email', $event.target.value)"
    >
  </div>
</template>

<script>
export default {
  props: ['name', 'email']
};
</script>

实际应用案例[编辑 | 编辑源代码]

案例：自定义开关组件[编辑 | 编辑源代码]

以下是一个自定义开关组件（Toggle Switch），使用 `v-model` 实现状态切换：

<!-- ToggleSwitch.vue -->
<template>
  <div class="toggle-switch" @click="toggle">
    <div class="slider" :class="{ active: modelValue }"></div>
  </div>
</template>

<script>
export default {
  props: ['modelValue'],
  methods: {
    toggle() {
      this.$emit('update:modelValue', !this.modelValue);
    }
  }
};
</script>

<style>
.toggle-switch {
  width: 50px;
  height: 24px;
  background: #ccc;
  border-radius: 12px;
  cursor: pointer;
}
.slider {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  margin: 2px;
  transition: 0.3s;
}
.slider.active {
  transform: translateX(26px);
  background: #4CAF50;
}
</style>

使用示例[编辑 | 编辑源代码]

<template>
  <toggle-switch v-model="isActive"></toggle-switch>
  <p>开关状态：{{ isActive ? '开启' : '关闭' }}</p>
</template>

<script>
import ToggleSwitch from './ToggleSwitch.vue';

export default {
  components: { ToggleSwitch },
  data() {
    return {
      isActive: false
    };
  }
};
</script>

- `v-model` 是 Vue.js 中实现双向数据绑定的核心指令。 - 在组件中，`v-model` 默认绑定 `value` prop 和 `input` 事件（Vue 2），或 `modelValue` prop 和 `update:modelValue` 事件（Vue 3）。 - Vue 3 支持多个 `v-model` 绑定，适用于复杂表单场景。 - 通过自定义组件和 `v-model`，可以创建可复用的表单控件，如输入框、开关等。

参见[编辑 | 编辑源代码]