在 React 中运行 Vue react-vue

MIT
JavaScript
跨平台
2017-06-16
两味真火

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

用途:

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

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

Reactivity 系统

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

npm install --save react-vue
import 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-helper
npm 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>
  }
}

文档

的码云指数为
超过 的项目
加载中

评论(1)

大苗子
大苗子
额 为什么会有这个需求

暂无资讯

暂无问答

使用 React 和 Vue 创建相同的应用,他们有什么差异?

在工作中应用 Vue 之后,我对它有了相当深刻的理解。 不过,俗话说「外国的月亮比较圆」,我好奇「外国的」 React 是怎么样的。 我阅读了 React 文档并观看了一些教程视频,虽然它们很棒,但...

2018/11/20 23:10
16
0
如何看待Vue在Github上的 star 数超越 React

如果要问这两年,前端最火的框架是什么,我相信100%的人都会说React和Vue。React是 Facebook 开源的一套JavaScript MVC 框架,由于 React的设计思想极其独特,属于革命性创新,性能出众,代码...

2018/08/14 13:42
22
0
vue与react哪种好?

vue与react,到目前为止两个我都用来写了好多项目,vue用的脚手架是vue-cli,react用的是dva,两者都对其进行了很好的封装,只需要简单的几步就能跑起来. 之前在国外一大神讨论这两者之间的区域,...

2018/09/04 20:25
74
0
Vue 与Angular、React框架的对比,你会学哪个?

首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。 View通过Controller来和M...

2018/10/29 17:24
64
0
Angular React Vue我应该选择什么?

前端开发比较

2018/06/06 15:57
89
0
vue实现的很炫酷的点赞效果, 支持三种icon, 多种属性 了解一下呗?

A Medium like clap button. Inspired by react-clap-button Github 地址 : https://github.com/AJLoveChina/vue-clap-button Install The recommended way is using npm npm install vue-cl...

2018/11/27 17:28
22
0
我从Angular 2转向Vue.js, 也没有选择React

、 译者按: 通过使用Angular的经历,作者已经完全转为Vue粉了!我们Fundebug目前还是用AngularJS 1,坦白说,学习曲线蛮陡的。 原文: Why we moved from Angular 2 to Vue.js (and why we did...

2017/09/20 13:24
415
0
前端的对决:React的JSX与Vue的templates

![vue's templates&react'JSX](http://upload-images.jianshu.io/upload_images/145564-060eef2e34e2dcfd?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) **React.js**和**Vue.js**是...

2018/01/04 12:17
885
0
经典好用的JavaScript框架Vue.js 简介

这篇文章旨在介绍一个好用的 JavaScript 框架 Vue.js,让各位读者对它有一个初步的了解。 何为 Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不...

2018/05/17 22:04
11
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部