I encountered a requirement during development: use already developed React components in the Vue project. Here I chose to use the vuera library to complete the requirements. Record the steps used below (using Vue components in Reat projects is similar to this step).
1. Install the vuera library
Vuera library address: https://www.npmjs.com/package/vuera
First, you need to install the vuera library in the Vue project. The installation instructions are as follows:
// 使用yarn安装插件
yarn add vuera
// 使用npm安装插件
npm i -S vuera
2. Install dependencies
Since we need to use React components in Vue, we first need to install React in the project. The installation instructions are as follows:
npm install --save react react-dom
In Vue, jsx syntax cannot be recognized, so you need to install dependencies to recognize react-jsx syntax. The installation instructions are as follows:
npm install @babel/plugin-transform-react-jsx
After the installation is complete, add this plug-in to the babel.config.js file:
module.exports = {
plugins: ["@babel/plugin-transform-react-jsx"]
};
3. Project configuration
Next, to introduce and use the vuera library in the form of a plug-in in the project, we need to add the following code to main.js:
import {
VuePlugin } from 'vuera'
Vue.use(VuePlugin)
4. Use components
After completing the above configuration, you can introduce and use React components in the Vue project.
The React component code is as follows:
import React from 'react'
function myReactComponent(props) {
const {
message } = props
function childClickHandle() {
props.onMyEvent('React子组件传递的数据')
}
return (
<div>
<h2>{
message }</h2>
<button onClick={
childClickHandle }>向Vue项目传递React子组件的数据</button>
</div>
)
}
export default myReactComponent
The Vue component code is as follows:
<template>
<div>
<h1>I'm a Vue component</h1>
<my-react-component :message="message" @onMyEvent="parentClickHandle"/>
</div>
</template>
<script>
// 引入React组件
import MyReactComponent from './myReactComponent'
export default {
components: {
'my-react-component': MyReactComponent // 引入React组件
},
data() {
return {
message: 'Hello from React!',
}
},
methods: {
parentClickHandle(data){
console.log(data);
}
},
}
</script>
Here I introduced this React component in a Vue project, the effect is as follows:
As you can see, the value transfer from Vue to the React component is implemented here and displayed on the page. According to the Chrome plug-in in the upper right corner, both Vue and React are used in this project.
When you click the button on the page, you can see that the data is passed from the React subcomponent to Vue:
This simply implements data communication between React and Vue components.
5. Other ways of use
The above uses the Vue plug-in form to embed the React component in the Vue project. If you do not want to use the Vue plug-in form, you can also use the other two forms to use the vuera library.
(1) Use wrapper component
<template>
<div>
<react :component="component" :message="message" />
</div>
</template>
<script>
import {
ReactWrapper } from 'vuera' // 引入vuera库
import MyReactComponent from './MyReactComponent' // 引入react组件
export default {
data () {
component: MyReactComponent,
message: 'Hello from React!',
},
components: {
react: ReactWrapper }
}
</script>
(2) Using the API of high-order components
<template>
<div>
<my-react-component :message="message" />
</div>
</template>
<script>
import {
ReactWrapper } from 'vuera' // 引入vuera库
import MyReactComponent from './MyReactComponent' // 引入react组件
export default {
data () {
message: 'Hello from React!',
},
components: {
'my-react-component': ReactInVue(MyReactComponent) }
}
</script>