angular,vue,react的父子通信
父子通信
- 父传子
vue:
父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据
子组件:export default {
props:["datamsg"] //子组件得到的数据,保存在props中
}
html:
<p>{{msg}}</p> //在组件的html页面进行渲染
将父组件中的数据以属性形式放在父组件里面的子组件上,然后子组件再在vue的实例中通过props:[]去得到父组件传的数据。
react:
父组件:<Child msg={datamsg}></Child> //子组件 传输的数据为datamsg
子组件:<p>{this.props.msg}<p> //子组件页面上渲染
将父组件中的值放在子组件上,子组件就可以通过this.props.属性名得到。
angular:
父组件:
js:
export class Father{ //在装饰器下面的类里写的数据。
msg="来自父组件的问候"
}
html:
<app-child [msg]="msg"></app-child> //放在子组件的属性上
子组件:
js:引入Input模块
export class child{
@Input() msg; //子组件得到数据
}
html:<p>{{msg}}</p> //子组件进行页面渲染
在父组件的类里面吧数据写好,然后在父组件里面的子组件标签上写上动态属性,子组件通过引入Input模块,写上@Input()这个装饰器。然后就可以得到数据。
- 子父通信
vue:
子组件:<button @click="giveData"></button>//在子组件的button按钮上添加点击事件
export default {
data(){
return{
msg:"我是子组件的数据"
}
}
methods:{
giveData(){
this.emit("give-data",msg)//添加自定义事件
}
}
}
父组件:<child v-on:give-data="showData"></child> //在父组件的子组件标签上面添加自定义的方法
export default{
methods:{
showData(data){
console.log(data) //得到子组件传递过来的数据
}
}
}
vue的子父通信是通过自定义事件emit完成的。需要在子组件上添加事件,然后在事件的方法里面创建一个自定义事件,并把数据放上去,然后在父组件里面的子组件标签上面使用自定义事件得到数据。
react:
使用state,将数据穿在状态中,父组件可以通过this.state获取到数据,而子组件也可以通过setState设置数据。
angular:
使用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就是子组件所传递过来的数据
}
}
angular中的子父通信是通过emit自定义事件,需要引入output和eventEmitter两个模块,然后在父组件里面讲子组件绑定自定义事件。自定义事件必须要写上$event,这是子组件的数据。
angular,vue,react的父子通信的更多相关文章
- 2015前端各大框架比较(angular,vue,react,ant)
前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...
- Angular Vue React 框架中的 CSS
框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...
- 前端三大框架(Angular Vue React)
前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...
- vue之非父子通信
一.非父子通信: 思路: 找个中间存储器,组件一把信息放入其中,组件二去拿 代码如下: let hanfei = new Vue(); # 实列化个空的vue对象,作为中间存储器来时间 ...
- angular,vue,react的基本语法—样式处理
基本语法 样式处理: vue: 动态属性: v-bind:class 简写 :class react: 变量:class={selecter} angular: 指令:[ngClass]=" ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...
- angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据
基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...
- angular vue react web前端三大主流框架的对比
首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...
随机推荐
- 【XSY2669】归并排序 树状数组 简单组合数学
题目描述 有一个长度为\(n\)的排列\(n=2^k\),你要把这个数组归并排序.但是在长度为\(2\)的时候有\(\frac{1}{2}\)的概率会把两个数交换(就是有\(\frac{1}{2}\) ...
- 【支付宝】"验签出错,sign值与sign_type参数指定的签名类型不一致:sign_type参数值为RSA,您实际用的签名类型可能是RSA2"
问题定位:从描述就可以看的出来了,你现在sign_type是 RSA类型的,要改成跟你现在用的签名类型一致的类型,也就是 要改为 RSA2 PHP为例 // 新版只支持此种签名方式 商户生成签名字符 ...
- MT【293】拐点处切线
(2018浙江高考压轴题)已知函数$f(x)=\sqrt{x}-\ln x.$(2)若$a\le 3-4\ln 2,$证明:对于任意$k>0$,直线$y=kx+a$ 与曲线$y=f(x)$有唯一 ...
- Nginx 添加 PHP 支持
背景介绍默认安装的Nginx是无法打开php文件的,需要修改相关配置才能支持php 安装yum -y install epel-release yum -y install nginx yum ins ...
- Codeforces Round #471 (Div. 2) F. Heaps(dp)
题意 给定一棵以 \(1\) 号点为根的树.若满足以下条件,则认为节点 \(p\) 处有一个 \(k\) 叉高度为 \(m\) 的堆: 若 \(m = 1\) ,则 \(p\) 本身就是一个 \(k\ ...
- django从零开始-模板
1.应用中添加模板 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contentt ...
- 使用Coverage进行代码覆盖率的测试
软件测试实验报告 一.实验目的: 使用软件测试代码覆盖率. 二.实验工具: Windows10.Python3.6.3.Coverage. 三.实验内容: 1.编写准备测试的代码main.py和测试代 ...
- One Person Game ZOJ - 3329(期望dp, 数学)
There is a very simple and interesting one-person game. You have 3 dice, namely Die1, Die2 and Die3. ...
- HEOI2016解题报告
树 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记,其他结点均无标记 ...
- Gym - 100989L
After the data structures exam, students lined up in the cafeteria to have a drink and chat about ho ...