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 ...
随机推荐
- 重新梳理IT知识之java-04数组
一.数组的概述 1.数组的理解:数组(Array),是多个相同类型数据按一定顺序排列的集合,并使用一个名字命名,并通过编号的方式对这些数据进行统一管理. 2.数组的相关概念 数组名 元素 索引 数组的 ...
- Codeforces Round #616 (Div. 2) D
莫队的模板 struct node{ int l,r,id; }q[maxn]; int cmp(node a,node b) { ) ? a.r < b.r : a.r > b.r); ...
- 大道至简第一章JAVA伪代码形式读后感
//愚公移山: public class YuGongYiShan{ //原始需求:“惩山北之塞,出入之迂” //沟通方式:“聚室而谋曰” //项目目标:“毕力平险,指通豫南,达于汉阴” //技术方案 ...
- Dart语言学习(十) Dart流程控制语句
一.条件语句:if.if...elseif.if...elseif...else int score = 95; if (score >=90) { print('优秀'); } else if ...
- leetcode菜鸡斗智斗勇系列(6)--- 检查一个string里面有几个对称的字段
1.原题: https://leetcode.com/problems/split-a-string-in-balanced-strings/ Split a String in Balanced S ...
- QT无法读入txt文件内容
用vs写QT无法利用相对路径读入txt文件,应将此文件加入到资源文件中.
- 2.9 logistic回归中的梯度下降法(非常重要,一定要重点理解)
怎么样计算偏导数来实现logistic回归的梯度下降法 它的核心关键点是其中的几个重要公式用来实现logistic回归的梯度下降法 接下来开始学习logistic回归的梯度下降法 logistic回归 ...
- ssh访问ubuntu13.10
步骤: 首先确保网络连接是ok,网络连接方式"桥接“,手动配置 ip 192.168.1.9,和主机是同一网段 1.检查当前有没有安装openssh-server(已安装) 2. 安装ope ...
- 3 Struts2的常见配置解析
1 package标签的相关配置 package标签:包,与Java中的包概念不一致.旨在更好的管理actionpackage标签的属性: name : 包的名称,在一个项目不重名即可,无具体含义 ...
- gcd && exgcd算法
目录 欧几里德算法与扩展欧几里德算法 1.欧几里德算法 2.扩展欧几里德算法 欧几里德算法与扩展欧几里德算法 1.欧几里德算法 #include<bits/stdc++.h> using ...