如何在 Vue 3 中正确实现父子组件间表单数据共享与展示-js教程-PHP中文网

本文详解如何通过 v-model 实现 Vue 3 中父子组件间表单输入值的双向绑定与跨组件传递，替代不适用于状态共享场景的独立 Composable 方案，确保按钮等下游组件能实时获取并显示邮箱、文本等输入内容。

本文详解如何通过 `v-model` 实现 vue 3 中父子组件间表单输入值的双向绑定与跨组件传递，替代不适用于状态共享场景的独立 composable 方案，确保按钮等下游组件能实时获取并显示邮箱、文本等输入内容。

在 Vue 3 的组合式 API 开发中，初学者常误将「逻辑复用」（Composable）等同于「状态共享」。如问题所示：多个和各自调用 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><textinput v-model="input2"></textinput><emailinput v-model="email"></emailinput><buttoncomponent :email="email"></buttoncomponent></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">
</div>
</template>

✅ 同理，EmailInput.vue 仅需将 type="email" 并复用相同逻辑即可。

Element Plus UI Vue3
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

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()
defineEmits()
```

✅ 总结

场景	推荐方式	原因
多个子组件需读写同一份数据	✅ 状态提升 + v-model	数据源唯一、响应式链清晰、调试友好
封装通用逻辑（如防抖、API 请求）	✅ Composable（如 useDebounce, useApi）	逻辑复用，不耦合状态归属
每个子组件需独立维护自身状态	✅ 局部 ref() 或 useInput()	避免意外耦合，职责单一