react-vue 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
react-vue 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
react-vue 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发Vue 组件
开源组织
地区 不详
投 递 者 两味真火
适用人群 未知
收录时间 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>
  }
}

文档

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (3)

加载中
我们提供UI出静态页面代码服务,50/页,也可以联系我们的官网:https://haomo-tech.com(V:husiping626)
2020/07/03 17:21
回复
举报
可以在react中调用vue组件么?
2019/09/25 16:44
回复
举报
打分: 力荐
额 为什么会有这个需求
2017/06/18 08:22
回复
举报
更多评论
暂无内容
发表了博客
2020/05/05 08:54

React和Vue的区别

1. react更多的是进行视图转换,对状态涉及很少,vue除了处理视图,本身还会管理状态,例如,watch,compouted等 2. react不会自动更新视图,只能手动setState,vue基于数据驱动,会自动更新视图 3. react更倾向于函数式编程,vue倾向于响应式编程 4. 虚拟DOM更新机制不同,vue会跟踪组件依赖关系,不需要重新渲染整个组件树。React则会重新渲染全部,除非自己添加shouldComponentUpdate、PureComponent或React.memo 5. react中...

0
0
发表了博客
2019/09/17 20:49

React与Vue的对比

  JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。但哪一款更适合你?本文将根据每个框架的重要优缺点,以及设计思路和见解,来对比介绍两个框架。 一.框架背景 React   React得到了Facebook社区的支持,使得构建交互式UI非常容易。React本质是前端组件化框架,不是一个完整的MVC框架,可以认为是MVC中的V(View)。   使用React.js的公司:Facebook,Instagram,Netflix,纽约时报,雅虎,Whats...

0
0
发表了博客
2018/05/28 23:38

vue和react区别

前端都知道3个主流框架,vue,react,anjular,当然目前最火的还是vue和react,那么vue 和react 的区别? 相同点: 1.都支持服务器端渲染 2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范 3.数据驱动视图 4.都有支持native的方案,React的React native,Vue的weex 5.都有管理状态,React有redux,Vue有自己的Vuex(自适应vue,量身定做) 不同点: 1.React严格上只针对MVC的view层,Vue则是...

0
0
发表了博客
2019/05/13 23:14

Vue与React比较

与React 相似: (1)虚拟DOM(Virtual DOM) 虚拟DOM的诞生是基于:改变真实的DOM状态远比改变一个JS对象的花销要大的多。 虚拟DOM是一个映射真实DOM的JS对象,当有变化产生时,就会创建一个新的虚拟DOM对象,计算新旧Virtual DOM的差别,然后把这些差别应用在真实的DOM上。 虚拟DOM的本质是嵌套着数组的原生对象,当新一项被加进当前JavaScript对象时,一个函数会计算新旧Virtual DOM的差异且反应在真实的DOM上。高性能框架提...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2021/10/28 15:09

想做一款移动APP,选择什么框架好一些

要做一款社交类APP,想用最低成本来实现,类似于混合式APP,请问选择哪一种框架合适一些,功能和性能上比较够用,成本低一些。各类框架看的眼花缭乱,之前有从事过原生和H5的项目。真正没有具体开发过,时间成本和功能性能上能均匀一些最好,谢谢

19
9
发表于大前端专区
2021/01/29 13:10

vue3 ts 点击事件触发点击事件的问题,以及file类型的问题

<template> <input type="file" class="file" name="files" accept="image/png,image/gif,image/jpeg,image/webp" @change="uploadChange" multiple="multiple" ref="file" /> <a href="javascript:;" @click="fileClick">上传</a> </template> <script lang="ts"> // import { reactive } from "vue"; export default { setup() { const fileClick = () => { ...

1
0
2019/11/15 11:11

git push -f 的问题

@红薯 你好,想跟你请教个问题:我使用git仓库的是码云,整个项目就我一人在开发,我用到了三个分支:个人开发分支、开发分支、主干分支, 步骤1:在个人分支开发完提交到远程,跟远程的开发分支 pull requerts 的时候,报有代码冲突,然后点击进去查看冲突,页面报500。。。 步骤2:紧接着我在本地的开发分支从远程拉取到本地,然后合并到个人开发分支,并未发现有任何冲突; 当时就很纳闷,整个项目就我一人在开发,不存在多人...

2
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
3 评论
12 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部