Vue表单中如何将React组件值绑定到Vue响应式模型？

核心原因 #

你之前直接赋值this.value=val无效，是因为Vue的props是单向数据流，子组件不能直接修改父组件传递的props值，必须通过触发事件通知父组件更新数据。

解决步骤 #

1. 调整React输入组件，正确触发更新事件 #

确保React组件接收value和onChange props，输入变化时将数值（对应原v-model.number）通过onChange传递出去：

import React from 'react';

const ReactInput = ({ value, onChange }) => {
  const handleChange = (e) => {
    // 转换为数字，匹配v-model.number的行为
    const numericValue = e.target.value ? Number(e.target.value) : null;
    onChange(numericValue);
  };

  return (
    <input
      type="number"
      value={value ?? ''} // 处理null/undefined的情况
      onChange={handleChange}
    />
  );
};

export default ReactInput;

2. 在Vue端配置wrapper适配v-model #

利用vue-react-wrapper的model配置，让包装后的React组件支持Vue的v-model语法：

<template>
  <div>
    <!-- 直接用v-model.number绑定Vue的表单模型 -->
    <ReactInputWrapper v-model.number="formValue" />
  </div>
</template>

<script>
import { createVueWrapper } from 'vue-react-wrapper';
import ReactInput from './ReactInput';

// 创建Vue包装组件，配置v-model映射
const ReactInputWrapper = createVueWrapper(ReactInput, {
  model: {
    prop: 'value', // 对应React组件接收的value prop
    event: 'input' // 对应React组件触发的onChange事件（vue-react-wrapper会自动映射为input事件）
  }
});

export default {
  components: { ReactInputWrapper },
  data() {
    return {
      formValue: 0 // 替换为你原Vue项目中的value.value变量
    };
  }
};
</script>

3. 手动绑定prop和事件的替代方案 #

如果不想用model配置，也可以手动绑定值和事件：

<template>
  <div>
    <ReactInputWrapper :value="formValue" @input="updateValue" />
  </div>
</template>

<script>
// 导入和包装代码同上
export default {
  components: { ReactInputWrapper },
  data() {
    return { formValue: 0 };
  },
  methods: {
    updateValue(val) {
      // 直接修改Vue的data变量，这才是正确的更新方式
      this.formValue = val;
    }
  }
};
</script>

关键注意事项 #

• 永远不要直接修改Vue组件的props，必须通过事件触发父组件更新数据。
• v-model.number要求传递的值是数字类型，所以React组件中要把输入值转换为数字，避免字符串类型导致的问题。

内容的提问来源于stack exchange，提问作者Lek