本文详解如何通过 v-model 实现 Vue 3 中父子组件间表单输入值的双向绑定与跨组件传递，替代不适用于状态共享场景的独立 Composable 方案，确保按钮等下游组件能实时获取并显示邮箱、文本等输入内容。
本文详解如何通过 `v-model` 实现 vue 3 中父子组件间表单输入值的双向绑定与跨组件传递，替代不适用于状态共享场景的独立 composable 方案，确保按钮等下游组件能实时获取并显示邮箱、文本等输入内容。
在 Vue 3 的组合式 API 开发中，初学者常误将「逻辑复用」（Composable）等同于「状态共享」。如问题所示：多个 <TextInput> 和 <EmailInput> 各自调用 useInput()，实则创建了彼此隔离的独立响应式引用——每个组件拥有自己的 ref('')，彼此无关联。因此，ButtonComponent 中再次调用 useInput() 得到的是一个全新的空 ref，自然无法显示用户在其他输入框中输入的内容。
✅ 正确解法是：将表单状态提升至父组件统一管理，并通过 v-model 实现子组件的双向绑定。这既符合 Vue 的响应式设计哲学，也避免了状态碎片化问题。
✅ 推荐方案：使用 v-model 进行状态提升与双向绑定
1. 父组件：声明响应式数据 + 绑定 v-model
<script setup>
import TextInput from './TextInput.vue'
import EmailInput from './EmailInput.vue'
import ButtonComponent from './ButtonComponent.vue'
import { ref } from 'vue'
// 提升状态：所有输入值均由父组件统一维护
const email = ref('')
const input1 = ref('')
const input2 = ref('')
</script>
<template>
<TextInput v-model="input1" />
<TextInput v-model="input2" />
<EmailInput v-model="email" />
<ButtonComponent :email="email" />
</template>2. 子输入组件（如 TextInput.vue）：遵循 v-model 协议
<script setup>
// 声明接收 v-model 值的 prop（默认为 modelValue）
defineProps(['modelValue'])
// 声明触发更新的事件（必须为 update:modelValue）
defineEmits(['update:modelValue'])
</script>
<template>
<div>
<label>{{ modelValue }}</label>
<input
type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</div>
</template>✅ 同理，EmailInput.vue 仅需将 type="email" 并复用相同逻辑即可。
3. 按钮组件：直接接收并展示父级状态
<script setup>
defineProps(['email']) // 接收父组件传入的 ref（响应式）
</script>
<template>
<button>{{ email }}</button>
</template>? 注意：此处传入的是 ref 对象本身（非 .value），因此模板中 {{ email }} 会自动解包显示其当前值，且随父组件更新实时响应。
立即学习“前端免费学习笔记（深入）”；
⚠️ 关键注意事项
- 不要滥用 Composable 管理共享状态：useInput() 在本例中本质是“创建新状态”，而非“访问共享状态”。若需跨组件共享逻辑（如验证、格式化），可封装为 useInputValidator() 等纯函数型 Composable，但状态本身应由组件层级决定。
- v-model 是语法糖，本质是 :modelValue + @update:modelValue：务必确保子组件正确声明 props 和 emits，否则绑定失效。
-
类型安全建议（TypeScript 用户）：
defineProps<{ modelValue: string }>() defineEmits<{ (e: 'update:modelValue', value: string): void }>()
✅ 总结
| 场景 | 推荐方式 | 原因 |
|---|---|---|
| 多个子组件需读写同一份数据 | ✅ 状态提升 + v-model | 数据源唯一、响应式链清晰、调试友好 |
| 封装通用逻辑（如防抖、API 请求） | ✅ Composable（如 useDebounce, useApi） | 逻辑复用，不耦合状态归属 |
| 每个子组件需独立维护自身状态 | ✅ 局部 ref() 或 useInput() | 避免意外耦合，职责单一 |
通过 v-model 实现表单状态集中管理，不仅解决了“按钮无法显示输入内容”的问题，更构建出可维护、易测试、符合 Vue 最佳实践的表单架构。
