三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react、vue、angular都有接触[\无奈脸]。虽然说可以拓展知识广度,但是在深度上很让人头疼。最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此,以便加深理解。
一、react
React是单向数据流,当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信。
父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据。
父组件:
import React, { Component } from 'react'; import Child from './child' class App extends Component { constructor(props){ super(props); this.state={ msg:'父类的消息', name:'John', age:50 }; this.callback = this.callback.bind(this); } // 通过子组件调用该方法接收从子组件传过来的消息 callback(msg,name,age){ this.setState({msg}); this.setState({name}); this.setState({age}); } render() { return ( <div className="App"> <p> Message: {this.state.msg}</p> <Child callback={this.callback} age={this.state.age} name={this.state.name}> </Child> </div> ); } } export default App;
子组件:
import React from "react"; class Child extends React.Component{ constructor(props){ super(props); this.state={ name:'Andy', age:20, msg:"来自子类的消息" }; // 这里目的是为了改变this的指向。使得在函数单独调用的时候,函数内部的this依然指向child组件,亦可用箭头函数的方式 this.change = this.change.bind(this); } change(){ //调用父组件的方法修改父组件的内容,即子传父 this.props.callback(this.state.msg,this.state.name,this.state.age); } // 通过this.props接收从父组件穿过来的消息 render(){ return( <div> <div>{this.props.name}</div> <div>{this.props.age}</div> <button onClick={this.change}>点击</button> </div> ) } } export default Child;
二、vue
1、父—>子
<!-- 父组件 -->// 父组件通过属性绑定给子组件传值 <parent> <child :parentToChild="content"></child> </parent> data(){ return { content:'sichaoyun' }; } <!-- 子组件 --> // 子组件通过props接收数据 export default { props: { parentToChild: String // 指定字符串类型,这里还有其他方式,可参考下面链接 } } //子组件接收后就可以在template中使用 // 或者在方法中通过this.parentToChild使用 <template> <div> <p>{{parentToChild}}</p> </div> </template>
2、子—>父
//vue2.0只允许单向数据传递,我们通过出发事件来改变组件的数据 <!-- 子组件代码 --> <template> <div @click="open"></div> </template> methods: { open() { this.$emit('showbox','the msg'); //触发showbox方法,'the msg'为向父组件传递的数据 } } <!-- 父组件代码 --> <child @showbox="toshow"></child> //监听子组件触发的showbox事件,然后调用toshow方法 methods: { toshow(value) { console.log(value); // the msg } }
3、补充以下用emit和on来进行父子以及兄弟组件通信的知识,双手奉上链接
三、angular2+
1、父—>子
// -----------------------------父组件--------------------------- // js:在装饰器下面的类里写的数据。 export class Father{ msg="来自父组件的问候" } // html: 通过属性绑定传值 <app-child [msg]="msg"></app-child> //放在子组件的属性上 // ----------------------------------子组件--------------------------- // js:引入Input模块 export class child{ @Input() msg; //子组件得到数据 } // html: <p>{{msg}}</p> //子组件进行页面渲染
2、子—>父
子组件使用EventEmitter创建自定义事件,并且通过@Output()装饰器把它作为属性暴露出来,父组件通过绑定这个属性来监听事件从而获取子组件数据。
// 使用emit自定义事件 // ------------------- 子组件代码----------------------------------------- // ts:导入Output和EventEmitter两个模块 export class Child{ @Output() constmEventToApp=new EventEmitter();//创建emit事件 ngInit(){ this.constmEventToApp.emit("数据") //在dom挂载时将数据放入自定义事件中 } } // -----------------------------父组件代码------------------------------ // html: <Child (constmEventToApp)="handleData($event)"></Child>//将子组件中的自定义事件绑定到父组件下面的子组件标签上。 // ts: export class Father{ handleDate(ev){ console.log(ev);//ev就是子组件所传递过来的数据 } }
总结至此!由于本媛才疏学浅,各处借鉴得此文章,so,有不对的地方欢迎各路大神指正,非常感谢!
特别鸣谢下面各位大神的文章,附上链接于此
参考链接:
三大前端框架(react、vue、angular2+)父子组件通信总结的更多相关文章
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- Vue的父子组件通信(转载)
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- vue(三)-父子组件通信
原因 : Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. props 父组件给子组件传递数据 props:作用是父组件给 ...
- vue.js父子组件通信动态绑定
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Vue.js-----轻量高效的MVVM框架(十、父子组件通信)
#1.父链 html: <h3>#父链</h3> <div> <div>子组件可以用 this.$parent 访问它的父组件.根实例的后代可以用 th ...
- 详解Vue 非父子组件通信方法(非Vuex)
假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件 // 根组件(this.$root) new Vue({ el: '#app', router, render: h => ...
- 用Vue的父子组件通信实现todolist的功能
先上代码 <body> <div id="root"> <div> <input v-model="inputValue&quo ...
- vue之父子组件通信
一. 父-子组件间通信 let children={ template:`<div><h1>{{send}}</h1></div>`, # 将传 ...
随机推荐
- PDF 补丁丁 0.6.0.3340 版发布(修复提取图片的问题)
新的版本修复了两个导致提取图片颜色异常的问题.
- Win10系列:C#应用控件进阶9
RectangleGeometry 在使用RectangleGeometry控件绘制矩形时,矩形的位置和尺寸由Rect属性定义,该属性指定矩形的相对位置.高度和宽度.Rect有四个参数,前两个参数表示 ...
- 基于DES加密的服务端分析
此程序建立了一个TCP服务端,端口号为10010,之后accept等待连接,如果接受到连接,那么就发送一些欢迎信息,以及提示信息---发送quit退出. 之后不停地调用recv,如果接受到数据,那么判 ...
- VIPKID 内推---开发工程师
VIPKID 目前是K12教育领域最大的一家公司,目前已发展到6w名北美外教,服务于中国50w的小朋友,每天数十万节视频课程在线上进行. 有兴趣加入VIPKID的程序员小伙伴,请发简历到 gloryz ...
- 【webpack学习笔记】a06-生产环境和开发环境配置
生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后 ...
- R语言预测实战(游浩麟)笔记2
特征构建技术 特征变换,对原始的某个特征通过一定的规则或映射得到新特征的方法,主要方法包括概念分层.标准化.离散化.函数变换以及深入表达.特征变换主要由人工完成,属于比较基础的特征构建方法. 概念分层 ...
- vmware安装CentOS开发环境搭建
CentOS开发环境搭建 一.安装系统 新建虚拟机 2.选择“自定义(高级)”,并点击[下一步] 3.选择虚拟机硬件兼容性,并点击[下一步] 4.选择“稍后安装操作系统”,并点击[下一步] 5.选 ...
- SQL-56 获取所有员工的emp_no、部门编号dept_no以及对应的bonus类型btype和recevied,没有分配具体的员工不显示
获取所有员工的emp_no.部门编号dept_no以及对应的bonus类型btype和recevied,没有分配具体的员工不显示CREATE TABLE `dept_emp` ( `emp_no` i ...
- 获取百度地图POI数据三(模拟关键词搜索)
上一篇博文中讲到如何获取用于搜索的关键词,并且已经准备好了一百五十万的关键词 这其中有门牌号码,餐馆酒店名称,公司名称,道路名称等.有了这些数据,我们就可以通过代码,模拟我们在百度地图的搜索框中搜 ...
- LINQ Expresstion Tree 表达式树
Expression trees represent code in a tree-like data structure, where each node is an expression, for ...