本文详解如何在 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)} 模式，确保完全受控。
以下是完整实践示例：
Reactivation Specialist · 流失召回
下载
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
✅ Vue 父组件（Options API 或 Composition API 均适用）
<template>
<react-wrapper
:component="ReactInput"
:value="value.value"
:handleChange="handleChange"
:is-disabled="isDisabled"
:show-controls="showControls"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import ReactInput from './ReactInput'
export default defineComponent({
name: 'VueFormWrapper',
setup() {
const value = ref({ value: 0 }) // 假设原 v-model.number="value.value"
const isDisabled = ref(false)
const showControls = ref(true)
const handleChange = (rawVal: string) => {
// ⚠️ 注意：e.target.value 总是字符串，需手动类型转换
const numericVal = Number(rawVal)
// 可选：添加 NaN 校验，避免无效赋值
if (!isNaN(numericVal)) {
value.value.value = numericVal
}
}
return {
value,
isDisabled,
showControls,
handleChange,
ReactInput
}
}
})
</script>✅ ReactInput 组件（受控实现）
import React, { ChangeEvent } from 'react'
interface ReactInputProps {
value: number
handleChange: (val: string) => void
isDisabled?: boolean
showControls?: boolean
}
const ReactInput: React.FC<ReactInputProps> = ({
value,
handleChange,
isDisabled = false,
showControls = true
}) => {
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
// 直接透传原始字符串，由 Vue 端决定是否转 number / 处理空值等
handleChange(e.target.value)
}
return (
<input
type="number"
value={value}
onChange={handleInputChange}
disabled={isDisabled}
// 注意：React 中无原生 controls 属性，如需 UI 控件需自行实现
/>
)
}
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 表单控件，真正实现「一套状态、两端驱动」，为混合技术栈下的平滑迁移提供坚实基础。
立即学习“前端免费学习笔记（深入）”；
