vuera--在vue中使用react组件

项目背景介绍，由于旧项目用的是vue2但公司组件库是react，现在项目需要迭代升级，不想自己重新写组件从而使用vuera来在vue中使用react组件库组件

1. 安装vuera

   yarn add vuera
   
   npm install --save vuera
   

2. 安装React

   //安装react
   npm install --save react react-dom
   //下载依赖识别react-jsx语法
   npm install @babel/plugin-transform-react-jsx
   //在babel.config.js中添加依赖
   module.exports = { 
     plugins: ["@babel/plugin-transform-react-jsx"]
   };
   

3. 在vue,mian.js中引用vuera

   import {  VuePlugin } from 'vuera'
   Vue.use(VuePlugin);
   

4. 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
   

5. 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>