react-vue 在 React 中运行 Vue开源项目

我要开发同款
匿名用户2017年06月16日
33阅读
开发技术JavaScript
所属分类Vue组件、Web应用开发、Vue 组件
授权协议MIT

作品详情

React-Vue旨在连接React和Vue,帮助您在React中运行Vue。

用途:

使用Vue的Reactivity系统来观察React组件

使用react-vue-loader以在React应用中运行Vue组件

Reactivity系统

感谢Vue层次分明的简洁设计,我们可以很容易的将reactivity系统导出(9KB压缩包),并在其上驱动React组件

npm install --save react-vueimport React, { Component } from 'react';import Vue, { observer } from 'react-vue';const store = new Vue({  data () {    return {      count: 0    }  },  methods: {    increase () {      this.count ++;    }  }});@observerexport default class Demo extends Component {  render () {    return <h1 onClick={store.increase}>{store.count}</h1>;  }}

文档

Vue组件

引入react-vue-loader可以将Vue组件编译成一个React组件。正如您所想的那样,您编写的Vue组件可以在React组件中运行,React组件也可以在Vue组件中运行。

npm install --save react-vue react-vue-helpernpm install --save-dev react-vue-loader// One.jsimport React, { Component } from 'react';import Two from './Two';export default class One extends Component {  render() {    return <Two>Hello Vue</Two>;  }}<!-- Two.vue --><template>  <div @click="count++">    <three>{{count}}</three>    <slot></slot>  </div></template><script>  import Three from './Three'  export default {    components: { Three },    data () {      return {        count: 0      }    }  }</script>// Three.jsimport React, { Component } from 'react';export default class Three extends Component {  render () {    return <span>{this.props.children}</span>  }}

文档

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论