当前位置：首页 > 文章列表 > 文章 > 前端 > Vue3v-model父子组件绑定教程

Vue3v-model父子组件绑定教程

2026-03-13 22:18:49 0浏览收藏

本文深入解析了 Vue 3 组合式 API 中 v-model 的核心机制与实战应用，手把手教你如何将父组件的响应式数据（如 user.favoriteColor）与自定义 SelectInput 子组件实现真正意义上的双向绑定——不再依赖繁琐的 props + 事件监听，而是通过标准化的 modelValue prop 和 update:modelValue 事件，让自定义表单组件像原生元素一样自然、简洁、可复用；文中不仅给出清晰可行的代码范例和关键避坑指南（如禁止在子组件中对 modelValue 直接赋值、必须用 :value + @change 替代内部 v-model），还延伸讲解了类型安全、修饰符支持等进阶技巧，助你写出更健壮、更符合 Vue 生态规范的受控组件。

Vue 3 中使用 v-model 实现父子组件间状态双向绑定的完整指南

本文详解如何在 Vue 3 组合式 API 中，通过 v-model 将父组件中的响应式状态（如 user.favoriteColor）双向绑定到可复用的 SelectInput 子组件，实现数据同步与事件响应。

本文详解如何在 Vue 3 组合式 API 中，通过 `v-model` 将父组件中的响应式状态（如 `user.favoriteColor`）双向绑定到可复用的 `SelectInput` 子组件，实现数据同步与事件响应。

在 Vue 3 中，v-model 不再是语法糖的简单替代，而是基于 modelValue prop 和 update:modelValue 事件的标准化双向绑定机制。它使自定义表单组件（如 <select>）能像原生 <input> 一样无缝集成到父组件的数据流中，大幅提升组件复用性与开发体验。

✅ 正确实现步骤

1. 父组件：使用 v-model 绑定响应式字段

在 Home.vue 中，直接将 user.favoriteColor 作为 v-model 的值传入子组件，无需额外 props 或事件监听：

<!-- Home.vue -->
<script setup>
import { ref } from 'vue';
import SelectInput from './SelectInput.vue';

const user = ref({
  name: '',
  favoriteColor: '', // 初始值为空字符串，与 select 的 placeholder 匹配
});

const selectOptions = ref(['red', 'green', 'blue', 'white', 'black']);
</script>

<template>
  <div class="user-input-container">
    <div class="user-input">
      <p>Favorite Color</p>
      <!-- ✅ 使用 v-model 双向绑定 -->
      <SelectInput v-model="user.favoriteColor" :options="selectOptions" />
    </div>
  </div>
</template>

? 注意：我们同时传入了 :options（用于渲染下拉项），而 v-model 专用于控制选中值——职责分离更清晰。

2. 子组件：接收 modelValue 并触发更新事件

SelectInput.vue 需要显式声明 modelValue prop，并通过 defineEmits 声明 update:modelValue 事件。关键点在于：

使用 :value 绑定当前值（而非 v-model 在 <select> 上，避免冲突）；
监听 @change 事件，手动调用 emit('update:modelValue', value) 向上同步。

<!-- SelectInput.vue -->
<script setup>
import { defineProps, defineEmits } from 'vue';

// ✅ 接收 v-model 的默认 prop：modelValue
const props = defineProps({
  modelValue: {
    type: [String, Number], // 支持字符串或数字类型（如 ID）
    default: '',
  },
  options: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(['update:modelValue']);

const updateModel = (e) => {
  emit('update:modelValue', e.target.value);
};
</script>

<template>
  &lt;select 
    :value=&quot;modelValue&quot; 
    @change=&quot;updateModel&quot;
    class=&quot;select-input&quot;
  &gt;
    <option disabled value="">Please select one</option>
    <option 
      v-for="option in options" 
      :key="option" 
      :value="option"
    >
      {{ option }}
    </option>
  &lt;/select&gt;
</template>

<style scoped>
.select-input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
</style>

⚠️ 重要细节：
必须使用 :value + @change 组合，不能在 <select> 上写 v-model（否则会覆盖父级绑定逻辑）；
modelValue 类型建议设为联合类型（String | Number），增强组件通用性；
:key 应确保唯一性（此处 option 若为纯字符串且不重复则安全；若存在重复值，建议使用索引或唯一 ID）。

3. 进阶：支持自定义 v-model 修饰符（可选）

如需支持 v-model.trim 或 v-model.number，可在子组件中扩展逻辑。例如处理 .number：

const updateModel = (e) => {
  const value = e.target.value;
  const newValue = props.modelValue === '' ? value : 
                   e.target.selectedOptions[0]?.dataset.type === 'number' 
                     ? Number(value) 
                     : value;
  emit('update:modelValue', newValue);
};

但常规场景中，保持简洁、语义明确更为推荐。