vuera基础知识_无缝集成 React 和 Vue

vuera基础知识

GitHub:https://github.com/akxcv/vuera

vuera基础知识_无缝集成 React 和 Vue

简介描述:无缝集成 React 和 Vue

vuera缝集成 React 和 Vue,实现在 React 中使用 Vue 组件,Vue 中使用 React 组件 。

安装

$ yarn add vuera
# or with npm:
$ npm i -S vuera

或者直接引入

<script src="https://unpkg.com/vuera"></script>

在React应用中使用Vue组件:

import React from 'react'
import MyVueComponent from './MyVueComponent.vue'

export default props =>
  <div>
    <MyVueComponent message={props.message} handleReset={props.handleReset} />
  </div>

在Vue应用程序中使用React组件:

<template>
  <div>
    <my-react-component :message="message" @reset="reset" />
  </div>
</template>

<script>
  import MyReactComponent from './MyReactComponent'

  export default {
    /* data, methods, etc */
    components: { 'my-react-component': MyReactComponent },
  }
</script>

海计划公众号
(2)
上一篇 2020/03/06 09:09
下一篇 2020/03/06 09:09

您可能感兴趣的内容

  • ES6封装H5本地存储localStorage、sessionStorage 小白教程_存储攻略教程

    localStorage: 方法存储的数据没有时间限制。sessionStorage: 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。localStorage、和sessionStorage的用法:(localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem、remove

    2020/03/29
  • Js中为什么我们不能直接使用export?基础教程_export菜鸟知识

    相信很多人最开始时都有过这样的疑问假如我的项目目录下有一个 index.html, index.js 于是我像这样写在浏览器之间打开index.html,发现这到底是为什么?为什么连chrome浏览器竟然还不完全支持es6的语法?其实,ES6之前已经出现了js模块加载的方案,最主要的是Commo

    2020/03/24
  • Netty高性能之道菜鸟指南_性能小白常识

    异步非阻塞通信在IO编程过程中,当需要同时处理多个客户端接入请求时,可以利用多线程或者IO多路复用技术进行处理。IO多路复用技术通过把多个IO的阻塞复用 到同一个select的阻塞上,从而使得系统在单线程的情况下可以同时处理多个客户端请求。与传统的多线程/多进程模型比,I/O多路复用的最大优势是系 统开销小,系统不需要创建新的额外进程或者线程,也不需要维护这

    2020/03/31
  • 小程序保存图片到相册功能实现入门基础教程_小程序基础指南

    项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题。废话不多说,直接上干货…功能逻辑:先检查用户请求过的权限中是否允许”保存到相册”权限,如果没有请求过这个权限,应该向用户发起授权请求(弹窗授权),如果请求过这个权限,并且授权了,那就保存图片,显示保存成功;如果请求过,但是是拒绝的,就跳到设置页,重新授权。上代码:<view bind

    2020/04/03
  • DojotoolKit基础教程_一个非常强大的面向对象的JavaScript的工具箱

    DojotoolKit入门基础 官方网址:http://dojotoolkit.org/ GitHub:https://github.com/dojo 简介描述:一个非常强大的面向…

    2020/03/06
  • vue axios 拦截器入门知识_axios教程视频

    前言项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。正文axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。mian.js//axios请求
    import Axios from “axios”;
    Vue.prototype.$axios = Axios;请求拦截器axios.

    2020/03/29
  • Js操作Cookie入门知识_cookie使用攻略

    介绍Web 服务器和 HTTP 服务器是无状态的,因此当 Web 服务器将网页发送到浏览器时,连接会被断开,服务器会忘记与用户相关的所有内容。那么浏览器和 Web 服务器是怎样记住用户信息的?cookie 被发明出来解决这个问题。当用户访问网页时,他们的名字、唯一 ID 或其他任何信息都可以存储在浏览器的 cookie 中。 当用户下次又回到网页时,cook

    2020/03/24
  • Development模式是如何运作的?小白攻略_模式小白知识

    如果您的JavaScript代码库非常复杂,那么您可能会想办法在开发模式和生产模式中捆绑和运行不同代码。在开发模式和生产模式中捆绑并运行不同的代码是非常强大的。在开发模式中,React里有许多预警,可以帮助我们在导致bug之前找到问题。然而,检测此类错误所需的代码通常会增加bundle文件的大小,并使应用程序运行得更慢。在开发模式中程序运行缓慢是可以接受的。

    2020/03/26
  • gmaps.js菜鸟教程_使用Google地图的Js库

    gmaps.js菜鸟教程 官方网址:https://hpneo.dev/gmaps/ GitHub:https://github.com/hpneo/gmaps 简介描述:使用Go…

    2020/03/06
  • Vue之Webpack入门及学习总结菜鸟教程_总结教程视频

    Vue之Webpack入门及学习总结菜鸟教程 Babel 是一个通用的多功能 JavaScript 编译器,但与一般编译器不同的是它只是把同种语言的高版本规则转换为低版本…

    2020/03/19
  • css实现div垂直水平居中的2种常用方法小白知识_布局小白教程

    方法一:利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件:设置父元素的行高line-height等于父元素height的高度子元素必须是行内块级元素display:inline-block;子元素设置vertical-align:middle此方法在开发中不能右浮动(不能靠右边)下方是完整代码,可以新建一个HTML

    2020/03/30
  • Ember.js和Vue.js对比,哪个框架更优秀?新手入门_框架入门基础知识

    JavaScript最初是为Web应用程序创建的。但是随着前端技术的发展,大多数开发人员更喜欢使用基于JavaScript的框架。它简化了你的代码以及使你能完成更多全栈工作,您几乎可以在任何框架中使用JavaScript。使用什么类型的框架决定了创建应用程序的便捷程度。因此,您必须慎重选择。在已经足够复杂的前端环境里,其中两个框架脱颖而出。我们会在本文中对E

    2020/03/23
  • 什么是BFC? CSS 如何使用伪元素清除浮动?小白知识_浮动指南攻略

    BFC概念:块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”。先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素。所以,BFC元素是不

    2020/03/30
  • Rest/Spread 属性入门知识探索 ES2018 和 ES2019_es6使用攻略

    Rest/Spread 属性Sebastian Markbåge的ECMAScript提案『Rest/Spread属性』可以:rest操作符(…)在对象解构中的使用。目前,该操作符仅适用于数组解构和参数定义。spread操作符(…)在对象字面量中的使用。目前,这个操作符只能在数组字面量和函数以及方法调用中使用。在对象解构中使用rest操作符(…)在对象解

    2020/04/05
  • css中 出现height为100%失效的原因及解决方案小白基础_css小白教程

    我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。解决如下:html,body{height: 100%;margin: 0;padding: 0;
    }那

    2020/04/05
  • html页面body与div之间产生空白解决方法菜鸟教程下载_布局使用说明

    在做一个页面输出时发现body与div之间出现20px左右高度的空白,尝试多种方法无解,尤其是方法1也解决不了,后来发现原来是html文件编码格式问题造成的!方法1:css初始化*{margin:0px;padding:0px;
    }方法2:当方法1解决不了,就将html文件格式保存为utf-8编码格式,即问题完美解决

    2020/04/03