開発中に、Vue プロジェクトですでに開発された React コンポーネントを使用するという要件に遭遇しました。ここでは、要件を満たすために vuera ライブラリを使用することにしました。以下で使用する手順を記録します (Reat プロジェクトでの Vue コンポーネントの使用は、この手順と似ています)。
1.vueraライブラリをインストールする
Vuera ライブラリのアドレス: https://www.npmjs.com/package/vuera
まず、Vue プロジェクトに vuera ライブラリをインストールする必要があります。インストール手順は次のとおりです。
// 使用yarn安装插件
yarn add vuera
// 使用npm安装插件
npm i -S vuera
2. 依存関係をインストールする
Vue で React コンポーネントを使用する必要があるため、まずプロジェクトに React をインストールする必要があります。インストール手順は次のとおりです。
npm install --save react react-dom
Vue では jsx 構文を認識できないため、react-jsx 構文を認識するには依存関係をインストールする必要があります。インストール手順は次のとおりです。
npm install @babel/plugin-transform-react-jsx
インストールが完了したら、このプラグインを babel.config.js ファイルに追加します。
module.exports = {
plugins: ["@babel/plugin-transform-react-jsx"]
};
3. プロジェクトの構成
次に、vuera ライブラリをプラグインの形式でプロジェクトに導入して使用するには、次のコードを main.js に追加する必要があります。
import {
VuePlugin } from 'vuera'
Vue.use(VuePlugin)
4. コンポーネントを使用する
上記の設定を完了すると、Vue プロジェクトに React コンポーネントを導入して使用できるようになります。
React コンポーネントのコードは次のとおりです。
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
Vue コンポーネントのコードは次のとおりです。
<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>
ここでは、この React コンポーネントを Vue プロジェクトに導入しました。その効果は次のとおりです。
ご覧のとおり、Vue から React コンポーネントへの値の転送がここで実装され、ページに表示されます。右上隅の Chrome プラグインによると、このプロジェクトでは Vue と React の両方が使用されています。
ページ上のボタンをクリックすると、データが React サブコンポーネントから Vue に渡されることがわかります。
これは、React コンポーネントと Vue コンポーネント間のデータ通信を実装するだけです。
5. その他の利用方法
上記では、Vue プラグイン フォームを使用して React コンポーネントを Vue プロジェクトに埋め込んでいますが、Vue プラグイン フォームを使用したくない場合は、他の 2 つのフォームを使用して vuera ライブラリを使用することもできます。
(1) ラッパーコンポーネントを使用する
<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) 上位コンポーネントのAPIの利用
<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>