Vuera

https://www.5axxw.com/wiki/content/kzt0a0

在React应用程序中使用Vue组件：

import React from 'react'
import MyVueComponent from './MyVueComponent.vue'

export default props =>
  <div>
    <MyVueComponent message={props.message} handleReset={props.handleReset} />
  </div>
或者在Vue应用程序中使用React组件：

<template>
  <div>
    <my-react-component :message="message" @reset="reset" />
  </div>
</template>

<script>
import MyReactComponent from './MyReactComponent'

export default {
/* data, methods, etc */
components: { 'my-react-component': MyReactComponent },
}
</script>

Use cases
👨👩👧 在一个应用程序中同时使用Vue和React
🏃 从React迁移到Vue或从Vue迁移到React
Installation
用纱线安装：

$ yarn add vuera
# or with npm:
$ npm i -S vuera

您也可以通过unpkg试用库：

<script src="https://unpkg.com/vuera"></script>

Usage
React中的Vue-首选用法
{Vu223最适合使用插件@Babel。

将vuera/babel添加到.babelrc的plugins部分：

{
  "presets": "react",
  "plugins": ["vuera/babel"]
}

现在，只需像使用React组件一样使用Vue组件！

import React from 'react'
import MyVueComponent from './MyVueComponent.vue'

export default () => (
  <div>
    <h1>I'm a react component</h1>
    <div>
      <MyVueComponent message='Hello from Vue!' />
    </div>
  </div>
)

React在Vue中-首选用法
在Vue应用程序中使用React的首选方法是使用Vue插件。

import Vue from 'vue'
import { VuePlugin } from 'vuera'

Vue.use(VuePlugin)

/* … */
现在，像通常使用Vue组件一样使用React组件！

<template>
  <div>
    <h1>I'm a Vue component</h1>
    <my-react-component :message="message" @reset="reset" />
  </div>
</template>

<script>
import MyReactComponent from './MyReactComponent'

export default {
data () {
message: 'Hello from React!',
},
methods: {
reset () {
this.message = ''
}
},
components: { 'my-react-component': MyReactComponent },
}
</script>

如果在Vue的根实例中配置选项，默认情况下这些选项不会传递给React组件中的Vue实例。因此，例如，在顶层配置的i18n或store实例选项在包装在React组件中的子Vue组件中不可用。要解决此问题，请配置vueInstanceOptions，类似于：

import Vue from 'vue'
// import other plugins or modules
import { config } from 'vuera'

// Vue.use(...)

config.vueInstanceOptions = { plugin: thePlugIn, store: myStore };
注意：如果使用的是Vue<2.4，则必须通过名为passedProps的特殊道具将所有道具传递给React组件：

<template>
  <div>
    <h1>I'm a Vue component</h1>
    <my-react-component :passedProps="passedProps"></my-react-component>
  </div>
</template>

<script>
import { ReactWrapper } from 'vuera'
import MyReactComponent from './MyReactComponent'

export default {
data () {
message: 'Hello from React!',
},
methods: {
reset () {
this.message = ''
}
},
computed: {
passedProps () {
return {
message: this.message,
reset: this.reset,
}
},
},
components: { 'my-react-component': MyReactComponent },
}
</script>

React中的Vue-没有Babel插件
如果你不想使用Babel插件，你仍然有两种使用这个库的方法。

使用包装组件：

import React from 'react'
import { VueWrapper } from 'vuera'
import MyVueComponent from './MyVueComponent.vue'

export default () => (
  <div>
    <VueWrapper
      component={MyVueComponent}
      message='Hello from Vue!'
    />
  </div>
)
或者使用HOC API：
import React from 'react'
import { VueInReact } from 'vuera'
import MyVueComponent from './MyVueComponent.vue'

export default () => {
  const Component = VueInReact(MyVueComponent)
  return (
    <div>
      <Component message='Hello from Vue!' />
    </div>
  )
}

React在Vue中-不使用Vue插件
如果您不想使用Vue插件，则仍有两种使用此库的方法。

使用包装组件：

<template>
  <div>
    <react :component="component" :message="message" />
  </div>
</template>

<script>
import { ReactWrapper } from 'vuera'
import MyReactComponent from './MyReactComponent'

export default {
data () {
component: MyReactComponent,
message: 'Hello from React!',
},
components: { react: ReactWrapper }
}
</script>

使用HOC API：

<template>
  <div>
    <my-react-component :message="message" />
  </div>
</template>

<script>
import { ReactInVue } from 'vuera'
import MyReactComponent from './MyReactComponent'

export default {
data () {
message: 'Hello from React!',
},
components: { 'my-react-component': ReactInVue(MyReactComponent) }
}
</script>

常见问题（我想）
是否支持儿童？
对。您可以像平常一样将孩子从React传递到Vue并返回。

React（子级将转到Vue组件的默认插槽）：

import React from 'react'
import MyVueComponent from './MyVueComponent.vue'

export default props =>
  <div>
    <MyVueComponent message={props.message}>
      Hello there!
    </MyVueComponent>
  </div>
Vue:

<template>
  <div>
    <my-react-component :message="message">
      G'day sir
    </my-react-component>
  </div>
</template>

<script>
import MyReactComponent from './MyReactComponent'

export default {
components: { 'my-react-component': MyReactComponent },
}
</script>

表演怎么样？它与纯React/Vue相比有多快/慢？
我不知道，但基准即将到来。敬请期待。