本文详解如何通过 v-model 实现 Vue 3 中父组件统一管理表单输入状态，并将数据实时传递至按钮等子组件，替代错误复用独立 composable 导致的状态隔离问题。
本文详解如何通过 `v-model` 实现 vue 3 中父组件统一管理表单输入状态，并将数据实时传递至按钮等子组件，替代错误复用独立 composable 导致的状态隔离问题。
在 Vue 3 的组合式 API 开发中，初学者常误将“逻辑复用”等同于“状态复用”，进而为每个输入框单独调用同一 composable（如 useInput()），结果导致各组件持有完全独立的响应式引用——这正是原文中 Button 组件无法显示邮箱内容的根本原因：ButtonComponent 中的 input 与 EmailInput 中的 input 并非同一响应式变量，彼此毫无关联。
✅ 正确解法是让父组件成为唯一数据源（Single Source of Truth），使用 v-model 建立子组件与父组件之间的双向绑定。v-model 本质是语法糖，它自动将 :model-value（或 :value）与 @update:model-value（或 @input）配对，使子组件可安全地读取并通知父组件更新。
✅ 推荐实现结构（基于 v-model）
Parent.vue（父组件 —— 状态中心）
<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><textinput v-model="input2"></textinput><emailinput v-model="email"></emailinput><buttoncomponent :email="email"></buttoncomponent></template>
TextInput.vue（通用文本输入子组件）
