React-Vue旨在连接React和Vue，帮助您在React中运行Vue。
用途：
使用Vue的Reactivity系统来观察React组件
使用react-vue-loader以在React应用中运行Vue组件
Reactivity系统感谢Vue层次分明的简洁设计，我们可以很容易的将reactivity系统导出（9KB压缩包），并在其上驱动React组件
pm istall --save react-vueimport React, { Compoet } from 'react';import Vue, { observer } from 'react-vue';cost store = ew Vue({ data () { retur { cout: 0 } }, methods: { icrease () { this.cout ++; } }});@observerexport default class Demo exteds Compoet { reder () { retur <h1 oClick={store.icrease}>{store.cout}</h1>; }}文档
Vue组件引入react-vue-loader可以将Vue组件编译成一个React组件。正如您所想的那样，您编写的Vue组件可以在React组件中运行，React组件也可以在Vue组件中运行。
pm istall --save react-vue react-vue-helperpm istall --save-dev react-vue-loader// Oe.jsimport React, { Compoet } from 'react';import Two from './Two';export default class Oe exteds Compoet { reder() { retur <Two>Hello Vue</Two>; }}<!-- Two.vue --><template> <div @click="cout++"> <three>{{cout}}</three> <slot></slot> </div></template><script> import Three from './Three' export default { compoets: { Three }, data () { retur { cout: 0 } } }</script>// Three.jsimport React, { Compoet } from 'react';export default class Three exteds Compoet { reder () { retur <spa>{this.props.childre}</spa> }}文档
评论