先上一张牛逼的测试页面截图！！
image.png
测试页面地址是 https://devilwjp.github.io/vuereact-for-cra-demo/build/index.html#/eleInReact
这个测试页充分说明了这个插件强壮的地方，它把react antd和vue element-ui成功的混合在了一起互相套用！并且竟然还能在react里支持vue的v-model双向绑定！
Vue和React快捷集成的工具包，并且适合复杂的集成场景
如何在Vue中嵌入React组件?如何在React中嵌入Vue组件？[下方高能]
image
可以在任何的Vue和React项目中使用另一个类型框架的组件，并且解决了复杂的集成问题
安装
npm i vuereact-combined -S
Why?
让vue和react的同学们一起来完成同一个项目同一个页面甚至同一个组件
- 使项目的人员选择性和机动性变得更强，vue和react的技术栈都可以加入项目
- 使项目的第三方插件选择性更强，vue和react的插件都可以通用
- 使研发人员的技术交流性更强，研发人员不应该被技术栈所限制
- 使项目可以集成更多的业务代码，其他vue和react项目的优秀代码可以快速引入
- 使前端研发人员可以更好的学习vue和react，了解两者的精华，促进团队在前端技术栈的广度
- 使用方式极其简便
遇到的困难
众所周知，React更纯粹，Vue做的封装更多，所以大多数的难度都是集中在react的组件引用vue组件的过程中
支持程度
在react组件中引入vue组件
| 功能 | 支持程度 | 说明 |
|---|---|---|
| 普通属性 | 完全支持 | |
| html片段属性 | 变向支持 | 通过$slots，在vue中使用具名插槽获取 |
| render props | 变向支持 | 通过$scopedSlots，在vue中使用作用域插槽获取 |
| children(普通插槽) | 完全支持 | |
| 组件合成事件 | 完全支持 | 通过on属性 |
| 组件原生事件(.native) | 不支持 | react没有这种感念，可以自己包囊div |
| v-model | 变向支持 | 通过$model，并且支持vue组件中随意自定义model属性 |
| context传入vue | 暂不支持 | 未来会支持，当前只有在vue中使用redux做了polyfill |
| html片段中使用react或者vue组件 | 完全支持 | react组件直接传入，vue组件继续通过applyVueInReact转换 |
| 懒加载vue组件 | 完全支持 | 通过lazyVueInReact |
| redux共享 | 完全支持 | 使用applyRedux |
| mobx共享 | 变向支持 | mobx本身就有react和vue的连接方式 |
| vuex共享 | 完全支持 | 使用applyVuex |
| sync装饰 | 变向支持 | 使用$sync |
| 事件修饰(key.enter、click.once) | 不支持 | 自行处理 |
| 透传 | 变向支持 | 使用data-passed-props |
在vue组件中引入react组件
| 功能 | 支持程度 | 说明 |
|---|---|---|
| 普通属性 | 完全支持 | |
| 具名插槽 | 完全支持 | 在react中使用属性获取 |
| 作用域插槽 | 完全支持 | 在react中使用属性获取，类型是个函数 |
| 普通插槽 | 完全支持 | |
| 组件合成事件 | 完全支持 | 在react中使用属性获取 |
| 组件原生事件(.native) | 暂不支持 | |
| v-model | 不支持 | react组件没有这个概念 |
| provider/inject传入react | 暂不支持 | 未来会支持 |
| sync装饰 | 不支持 | react组件没有这个概念 |
| redux共享 | 完全支持 | 使用applyRedux |
| mobx共享 | 变向支持 | mobx本身就有react和vue的连接方式 |
| vuex共享 | 完全支持 | 使用applyVuex |
| 事件修饰(key.enter、click.once) | 不支持 | react组件没有这个概念 |
| 懒加载react组件 | 完全支持 | 通过lazyReactInVue |
| 透传 | 变向支持 | 使用data-passed-props |
使用前提
项目中要同时安装react和vue的相关环境
如果是通过vue-cli3创建的项目
请参考 https://github.com/devilwjp/vuereact-for-vuecli3-demo
如果通过react-create-app创建的项目（react版本需要>=16.3）
请参考 https://github.com/devilwjp/vuereact-for-cra-demo
安装
npm i vuereact-combined
重要！
由于react hooks的取名规范是use开头，所以将use开头的方法全部修改成了apply开头，老的use开头方法仍然有效
0.3.6新增
sync修饰(applyVueInReact)
在react组件中使用vue组件，如果要使用vue的sync修饰，使用sync
- 属性名
render () {
return (
{
console.log(val)
this.setState({
test1: val
})
}
}
}}/>
)
}
applyVueInReact
在react组件中使用vue的组件
import React from 'react'
import VueComponent from '../views/test2.vue' // vue组件
import { applyVueInReact } from 'vuereact-combined'
let VueComponentInReact = applyVueInReact(VueComponent)
class demo1 extends React.Component{
render(){
return (
我是普通的插槽
)
}
}
export default demo1
在react组件中，向vue组件传递具名插槽和作用域插槽，以及绑定自定义事件，以及v-model应用
react本身并不支持v-model，所以需要通过model的value和setter也不需要变化
import React from 'react'
import VueComponent from '../views/test2' // vue组件
import { applyVueInReact } from 'vuereact-combined'
let VueComponentInReact = applyVueInReact(VueComponent)
class demo1 extends React.Component{
constructor (props) {
super(props)
this.event1 = this.event1.bind(this)
this.state = {
aaa: 1111
}
}
event1 (...args) {
console.log(args)
}
render(){
return (
插槽A ,
slotB: 插槽B
}} $scopedSlots={{
slotC: (context) => 我是作用域插槽：{context.value}
}} $model={{
value: this.state.aaa, // value必须是一个state
setter: (value) => { this.setState({ aaa: value }) } // setter必须是直接修改state
}}>
我是普通的插槽