注册组件

Vue中:1.引入组件;2.在components中注册组件;3.使用组件;

React中:1.引入组件;2.使用组件;

子父传值

Vue中
父组件向子组件传值
1.在父组件中绑定值;2.子组件通过在props中接收值;3.正常使用;

子组件向父组件传值
1.子组件通过this.$emit订阅;2.父组件通过v-on监听;

React中
父组件向子组件传值
1.在父组件中直接写值;2.在子组件中通过this.props.接收值;

子组件向父组件传值
(方法一)
1.给子组件定义一个方法news,属性为this;2.子组件中添加一个按钮定义一个onClick事件this.props.news.getChildData就可以调用父组件的方法并使用bind绑定this和传递参数;

这里父组件中的getChildData方法就可以通过形参接收参数。

(方法二)
1.给子组件定义一个值并写上方法;2.在子组件中定义一个onClick方法,在方法中通过this.props拿到子组件传过来的值,并将值传给父组件;3.在父组件中的那个方法中拿到子组件传过来的值并修改值
父组件

子组件

父组件主动获取子组件的数据及方法

1.调用子组件的时候指定一个ref值
2.通过this.refs.header 获取整个子组件实例 (注意要在dom加载完成之后获取)

Vue和React之间关于注册组件和组件间传值的区别的更多相关文章

  1. vue和react之间的区别

    1.Vue和React之间的区别 相同点: Vue和其他框架一样,都有组件开发和虚拟dom 都支持props进行父子组件之间的数据通信 都支持数据驱动视图,不直接操作真实dom 都支持服务器端的 渲染 ...

  2. vue 和 react 常用包(插件、组件 或 工具)

    vue 和 react  都可以使用的包(只是 纯 js 功能的包) 1.qs : https://blog.csdn.net/sansan_7957/article/details/82227040 ...

  3. vue、react等SPA应用页脚组件闪烁的解决办法

    大家好,我是木瓜太香.大家在开发单页应用的时候,经常会遇到这样的需求,头部和尾部两个组件是大多数组件公用的,而中间的内容区域则是单独存在的,而且一般内容组件逻辑会比较多,如果我们不停刷新页面可能会出现 ...

  4. vue中父子间传值和非父子间传值

    vue传值一般分三种方式:父组件向子组件传值.子组件向父子间传值.非父子组件进行传值 一.父组件向子组件传值:父组件引用子组件后,通过数据绑定(v-bind)向子组件传值 父组件: <templ ...

  5. Vue/React如何优雅的一劳永逸的注册路由及组件

    原文链接: 本人掘金文章  假如图片看不清晰可前往掘金原文预览 官方文档: 组建注册 路由注册 未优化版: 在Vue官方文档 中,我们通过  Vue.component('MyComponentNam ...

  6. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  7. Vue组件以及组件之间的通信

    一.组件的注册 1. 全局组件注册 1. 注册基本语法Vue.component Vue.component("my_header", { template: `<div&g ...

  8. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  9. 关于vue,angularjs1,react之间的对比

    1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡temp ...

随机推荐

  1. jquery-ajax的用法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Centos7虚拟环境virtualenv与virtualenvwrapper的安装及基本使用

    一.使用虚拟环境的原因 在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题:亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难.此时,我们需 ...

  3. 前端学习 之 CSS(一)

    一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...

  4. C++的const成员函数

    我们知道,在C++中,若一个变量声明为const类型,则试图修改该变量的值的操作都被视编译错误.例如, const char blank = ‘’; blank = ‘\n’;  // 错误 面向对象 ...

  5. ava StringTokenizer 类使用方法

    菜鸟教程 -- 学的不仅是技术,更是梦想! 首页 笔记首页 Android 互联网 程序员人生 程序员笑话 编程技术 红包 知识店铺 --> 首页 Android 鸡汤 逗乐 Search Ja ...

  6. 1146. Snapshot Array

    Implement a SnapshotArray that supports the following interface: SnapshotArray(int length) initializ ...

  7. 关于window.location.href页面跳转的坑

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  8. 华为事件对A股的影响思考

    美国对华为实施禁商令: 利好:自主可控-替代品 软件:国产操作系统(中国软件,浪潮软件,湘邮科技...) 芯片:国产芯片(士微兰,国民技术...) 利好:华为优势产品 5G: 利好:反制资源 稀土永磁 ...

  9. task20160125

    http://task.zbj.com/2034844/n15o1.html 百度开放平台--首页>帮助文档首页>Frontia>Android开发指南>个人数据存储 http ...

  10. mysql8 Could not retrieve transation read-only status server

    想回顾下ssm,看着网上别的帖子手动搭了一个,一直报Could not retrieve transation read-only status server , java.sql.SQLExcept ...