编辑“︁Vue.js v-model 组件”︁

= Vue.js v-model 组件 =

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

== 基本语法 ==
在原生 HTML 元素上，`v-model` 的用法如下：
<syntaxhighlight lang="html">
<input v-model="message" placeholder="请输入内容">
<p>输入的内容是：{{ message }}</p>
</syntaxhighlight>

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

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

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

<syntaxhighlight lang="html">
<!-- 父组件 -->
<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>
</syntaxhighlight>

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

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

=== 输出说明 ===
- 用户在输入框中输入内容时，子组件通过 `$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 ===
<syntaxhighlight lang="html">
<!-- 父组件 -->
<template>
  <custom-input v-model="username"></custom-input>
</template>
</syntaxhighlight>

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

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

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

=== 示例：多个 v-model ===
<syntaxhighlight lang="html">
<!-- 父组件 -->
<template>
  <user-form
    v-model:name="userName"
    v-model:email="userEmail"
  ></user-form>
</template>
</syntaxhighlight>

<syntaxhighlight lang="html">
<!-- 子组件 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>
</syntaxhighlight>

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

<syntaxhighlight lang="html">
<!-- 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>
</syntaxhighlight>

=== 使用示例 ===
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

== 参见 ==
* [[Vue.js 组件基础]]
* [[Vue.js 表单输入绑定]]
* [[Vue 3 新特性]]

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js深入组件]]