本文详解如何在 vue 项目中嵌入 react 组件时，实现类似 `v-model.number="value"` 的双向数据同步——通过显式传递 value + onchange 回调，在 vue 端响应式更新数据，并在 react 子组件中受控管理状态。
在 Vue → React 渐进式迁移过程中，常需将原有 Vue 表单组件（如
因此，要让 Vue 的 value.value 与 React Input 的值实时同步，关键在于两点：
- ✅ Vue 端：将 value.value 作为 prop 传入 React 组件（只读）；
- ✅ Vue 端：提供 handleChange 回调，接收 React 组件发出的新值，并主动更新 Vue 响应式数据（如 this.value.value = Number(val)）；
- ✅ React 端：严格使用 value={props.value} + onChange={(e) => props.handleChange(e.target.value)} 模式，确保完全受控。
以下是完整实践示例：
✅ Vue 父组件（Options API 或 Composition API 均适用）
✅ ReactInput 组件（受控实现）
import React, { ChangeEvent } from 'react'
interface ReactInputProps {
value: number
handleChange: (val: string) => void
isDisabled?: boolean
showControls?: boolean
}
const ReactInput: React.FC = ({
value,
handleChange,
isDisabled = false,
showControls = true
}) => {
const handleInputChange = (e: ChangeEvent) => {
// 直接透传原始字符串，由 Vue 端决定是否转 number / 处理空值等
handleChange(e.target.value)
}
return (
)
}
export default ReactInput ? 关键注意事项
- 不要在 React 组件内维护本地 state：若同时写 useState() 并忽略 props.value，会导致「非受控→受控」警告或行为不一致；
- onChange vs onInput：React 官方推荐 onChange（兼容所有表单元素），虽底层触发时机略晚于 onInput，但语义更清晰；若需毫秒级响应（如实时搜索），可改用 onInput，但需自行处理 e.currentTarget.value；
- 类型安全：建议在 handleChange 中对 rawVal 做防御性解析（如 Number(val) || 0），避免 Vue 数据被设为 NaN；
- .number 修饰符等效逻辑：Vue 的 v-model.number 本质就是自动 Number() 转换，该逻辑应平移至 Vue 端的 handleChange 中，而非交由 React 处理；
- react-wrapper 实现要点：确保 createRoot().render() 正确接收并透传所有 props（包括 value 和 handleChange），且每次 props 变化时触发重渲染。
通过以上模式，你就能在保留 Vue 表单统一数据流的前提下，无缝集成 React 表单控件，真正实现「一套状态、两端驱动」，为混合技术栈下的平滑迁移提供坚实基础。
立即学习“前端免费学习笔记（深入）”；
