本文详解如何在 vue 项目中通过 `v-model` 语义无缝同步 react 输入组件（如 `
在 Vue → React 渐进式迁移场景中，常需将 Vue 表单中的原生组件（如
因此，关键在于：Vue 层需主动维护一个响应式状态，并在 handleChange 中精确更新该状态；同时将该状态作为 :value 向下透传给 React 组件，使其成为受控组件。
✅ 正确实现步骤（Vue 3 Composition API 示例）
假设你在 Vue 组件中定义了如下响应式数据：
import { ref, defineComponent } from 'vue'
export default defineComponent({
setup() {
// ✅ 使用 ref 或 reactive 管理表单字段（支持 .value 访问）
const value = ref(0) // 初始值类型需与业务一致
// ✅ handleChange 必须同步更新 Vue 的响应式状态
const handleChange = (val: string) => {
// 若需 number 类型（模拟 v-model.number），需显式转换
const numericVal = Number(val)
// 可选：校验 NaN 或空字符串
if (!isNaN(numericVal)) {
value.value = numericVal
} else if (val === '') {
value.value = '' // 或设为 0，依业务而定
}
}
return {
value,
handleChange
}
}
}) 对应的模板中，确保 :value 和 :handleChange 正确绑定：
立即学习“前端免费学习笔记（深入）”；
:handleChange="handleChange" />
而在 ReactInput 组件内部，必须严格遵循 React 受控组件规范：
// ReactInput.tsx
import React from 'react'
interface ReactInputProps {
value: number | string
handleChange: (val: string) => void
}
export const ReactInput: React.FC = ({ value, handleChange }) => {
return (
handleChange(e.target.value)} // ✅ 仅触发 Vue 更新
// ⚠️ 注意：不要在此处 setState！ReactInput 应无本地 state
/>
)
} ⚠️ 关键注意事项
- onChange vs onInput：React 官方推荐 onChange（对应 DOM change 事件），但对实时输入（如数字输入、搜索框），onInput 更及时。若需毫秒级同步，可在 React 组件中改用 onInput，但需注意兼容性（如 Safari 对 type="number" 的 onInput 支持较晚）。
- 类型转换不可省略：e.target.value 永远是字符串，即使 type="number"。v-model.number 的行为需由你手动实现：Number(val) + isNaN 校验。
- 避免 Vue 和 React 双重状态：ReactInput 内部不应维护自己的 useState，否则会破坏单向数据流，导致 Vue 状态与 React 视图不一致。
- ref 的 .value 是必需的：Vue 3 中 ref() 返回的是响应式对象，必须通过 .value 读写；若误传 value（而非 value.value）给 React，会导致值无法响应更新。
✅ 总结：实现 Vue ↔ React 双向同步的黄金法则
| 角色 | 职责 |
|---|---|
| Vue 层 | 提供响应式 ref/reactive 状态；提供 handleChange 更新该状态 |
| React 层 | 接收 value 作为 prop 并渲染；通过 onChange/onInput 回调通知 Vue 变更 |
| 桥梁 | react-wrapper 仅负责挂载与 props 透传，不参与逻辑判断或状态管理 |
只要严格遵循“Vue 控制状态、React 控制视图”的单向数据流原则，即可在混合架构中稳定复现 v-model 的语义体验——无需额外库，不侵入原有 React 组件逻辑，真正实现平滑迁移。
