Vue和React之间关于注册组件和组件间传值的区别
注册组件
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之间关于注册组件和组件间传值的区别的更多相关文章
- vue和react之间的区别
1.Vue和React之间的区别 相同点: Vue和其他框架一样,都有组件开发和虚拟dom 都支持props进行父子组件之间的数据通信 都支持数据驱动视图,不直接操作真实dom 都支持服务器端的 渲染 ...
- vue 和 react 常用包(插件、组件 或 工具)
vue 和 react 都可以使用的包(只是 纯 js 功能的包) 1.qs : https://blog.csdn.net/sansan_7957/article/details/82227040 ...
- vue、react等SPA应用页脚组件闪烁的解决办法
大家好,我是木瓜太香.大家在开发单页应用的时候,经常会遇到这样的需求,头部和尾部两个组件是大多数组件公用的,而中间的内容区域则是单独存在的,而且一般内容组件逻辑会比较多,如果我们不停刷新页面可能会出现 ...
- vue中父子间传值和非父子间传值
vue传值一般分三种方式:父组件向子组件传值.子组件向父子间传值.非父子组件进行传值 一.父组件向子组件传值:父组件引用子组件后,通过数据绑定(v-bind)向子组件传值 父组件: <templ ...
- Vue/React如何优雅的一劳永逸的注册路由及组件
原文链接: 本人掘金文章 假如图片看不清晰可前往掘金原文预览 官方文档: 组建注册 路由注册 未优化版: 在Vue官方文档 中,我们通过 Vue.component('MyComponentNam ...
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- Vue组件以及组件之间的通信
一.组件的注册 1. 全局组件注册 1. 注册基本语法Vue.component Vue.component("my_header", { template: `<div&g ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- 关于vue,angularjs1,react之间的对比
1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡temp ...
随机推荐
- ANSYS单元应用简介1
目录 1. LINK单元 2. BEAM单元 3. PLANE单元 4. SHELL单元 5. SOLIDE单元 6. COMBIN单元 ANSYS中的单元针对不同的应用对象,有着不同的选择方法,下面 ...
- 当在命令行中执行virtualenv venv时报此错误:'utf-8' codec can't decode byte 0xd5 in position 38: invalid continuation by
1.windows中安装虚拟环境virtualenv时, 当在命令行中执行virtualenv venv时报此错误:'utf-8' codec can't decode byte 0xd5 in po ...
- word2vec词向量处理中文语料
word2vec介绍 word2vec官网:https://code.google.com/p/word2vec/ word2vec是google的一个开源工具,能够根据输入的词的集合计算出词与词之间 ...
- https和http的主要区别
HTTPS和HTTP的区别主要如下: 1.https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用. 2.http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输 ...
- 入门项目数字手写体识别:使用Keras完成CNN模型搭建(重要)
摘要: 本文是通过Keras实现深度学习入门项目——数字手写体识别,整个流程介绍比较详细,适合初学者上手实践. 对于图像分类任务而言,卷积神经网络(CNN)是目前最优的网络结构,没有之一.在面部识别. ...
- nginx的access的阶段的access模块、auth_basic模块、auth_request模块及satisfy指令介绍
access 模块 示例从上向下匹配 location / { deny 192.168.1.1; allow 192.168.1.0/24; allow 10.1.1.0/16; allow 200 ...
- MySQL之多表查询(笛卡尔积查询、内连接、外连接(左外连接,右外连接)、union、union all )
多表查询 测试数据 create table emp (id int,name char(10),sex char,dept_id int); insert emp values(1,"大黄 ...
- shell脚本中执行sql命令
1.mysql 数据库表信息 2.shell脚本(a.sh)信息 #!/bin/sh mysql -u root << myInsert insert into test.t values ...
- ‘A’ = N’A’ , will not kill index seek in sqlserver version above 2014 anymore
Thanks to The advisor show us that we can get different behavior when we use condition , ='20000' or ...
- 「luogu3810」陌上花开
「luogu3810」陌上花开 传送门 三维偏序, \(\text{CDQ}\) 分治板子题. 判重的地方注意一下,别的就都是板子了. 参考代码: #include <algorithm> ...