注册组件

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. 重新梳理IT知识之java-04数组

    一.数组的概述 1.数组的理解:数组(Array),是多个相同类型数据按一定顺序排列的集合,并使用一个名字命名,并通过编号的方式对这些数据进行统一管理. 2.数组的相关概念 数组名 元素 索引 数组的 ...

  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); ...

  3. 大道至简第一章JAVA伪代码形式读后感

    //愚公移山: public class YuGongYiShan{ //原始需求:“惩山北之塞,出入之迂” //沟通方式:“聚室而谋曰” //项目目标:“毕力平险,指通豫南,达于汉阴” //技术方案 ...

  4. Dart语言学习(十) Dart流程控制语句

    一.条件语句:if.if...elseif.if...elseif...else int score = 95; if (score >=90) { print('优秀'); } else if ...

  5. leetcode菜鸡斗智斗勇系列(6)--- 检查一个string里面有几个对称的字段

    1.原题: https://leetcode.com/problems/split-a-string-in-balanced-strings/ Split a String in Balanced S ...

  6. QT无法读入txt文件内容

    用vs写QT无法利用相对路径读入txt文件,应将此文件加入到资源文件中.

  7. 2.9 logistic回归中的梯度下降法(非常重要,一定要重点理解)

    怎么样计算偏导数来实现logistic回归的梯度下降法 它的核心关键点是其中的几个重要公式用来实现logistic回归的梯度下降法 接下来开始学习logistic回归的梯度下降法 logistic回归 ...

  8. ssh访问ubuntu13.10

    步骤: 首先确保网络连接是ok,网络连接方式"桥接“,手动配置 ip 192.168.1.9,和主机是同一网段 1.检查当前有没有安装openssh-server(已安装) 2. 安装ope ...

  9. 3 Struts2的常见配置解析

    1 package标签的相关配置 package标签:包,与Java中的包概念不一致.旨在更好的管理actionpackage标签的属性: name :  包的名称,在一个项目不重名即可,无具体含义 ...

  10. gcd && exgcd算法

    目录 欧几里德算法与扩展欧几里德算法 1.欧几里德算法 2.扩展欧几里德算法 欧几里德算法与扩展欧几里德算法 1.欧几里德算法 #include<bits/stdc++.h> using ...