当前位置：首页 > React

react中vue如何一起使用

2026-01-26 05:48:20React

在React项目中集成Vue或反之并非常规做法，但可通过特定技术实现组件级共存。以下是两种框架协同使用的可行方案：

通过Web Components桥接

Vue 3支持将组件编译为Web Components，React可直接调用。在Vue项目中配置：

// Vue组件配置
import { defineCustomElement } from 'vue'
const MyVueComponent = defineCustomElement({
  // Vue组件选项
})
customElements.define('my-vue-component', MyVueComponent)

React项目中直接使用：

function ReactComponent() {
  return (
    <div>
      <my-vue-component />
    </div>
  )
}

使用iframe隔离

将Vue应用嵌入React项目的iframe中，通过postMessage通信：

// React组件
function App() {
  return (
    <iframe 
      src="/vue-app.html" 
      onLoad={(e) => {
        e.target.contentWindow.postMessage({ type: 'update', data: 'value' })
      }}
    />
  )
}

共享状态管理

通过外部状态库实现数据同步，例如Redux或Pinia：

// 共享store.js
export const store = {
  state: { count: 0 },
  increment() {
    this.state.count++
  }
}

// Vue组件
import { store } from './store'
export default {
  methods: {
    handleClick() {
      store.increment()
    }
  }
}

// React组件
import { store } from './store'
function Counter() {
  const [count, setCount] = useState(store.state.count)
  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setCount(store.state.count)
    })
    return unsubscribe
  }, [])
}

构建工具配置

在Vite或Webpack中同时配置两种框架：

// vite.config.js
import vue from '@vitejs/plugin-vue'
import react from '@vitejs/plugin-react'

export default {
  plugins: [
    vue(),
    react()
  ]
}