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(控制器),主要是基于分层的目的,让彼此的职责分 ...
随机推荐
- Django+Xadmin打造在线教育系统(八)
首页和全局404,500配置 轮播图 公开课 授课机构 新建view ## 首页view class IndexView(View): def get(self,request): # 取出轮播图 a ...
- 【XSY2719】prime 莫比乌斯反演
题目描述 设\(f(i)\)为\(i\)的不同的质因子个数,求\(\sum_{i=1}^n2^{f(i)}\) \(n\leq{10}^{12}\) 题解 考虑\(2^{f(i)}\)的意义:有\(f ...
- 【XSY1294】sub 树链剖分
题目描述 给你一棵\(n\)个点的无根树,节点\(i\)有权值\(v_i\).现在有\(m\)次操作,操作有如下两种: \(1~x~y\):把\(v_x\)改成\(y\). \(2\):选择一个连通块 ...
- 【刷题】BZOJ 2759 一个动态树好题
Description 有N个未知数x[1..n]和N个等式组成的同余方程组: x[i]=k[i]*x[p[i]]+b[i] mod 10007 其中,k[i],b[i],x[i]∈[0,10007) ...
- 【CF446C】DZY Loves Fibonacci Numbers (线段树 + 斐波那契数列)
Description 看题戳我 给你一个序列,要求支持区间加斐波那契数列和区间求和.\(~n \leq 3 \times 10 ^ 5, ~fib_1 = fib_2 = 1~\). Solut ...
- 「SHOI2016」黑暗前的幻想乡 解题报告
「SHOI2016」黑暗前的幻想乡 sb题想不出来,应该去思考原因,而不是自暴自弃 一开始总是想着对子树做dp,但是状态压不起去,考虑用容斥消减一些条件变得好统计,结果越想越乱. 期间想过矩阵树定理, ...
- 牛客练习赛40 A 小D的剧场 (思维dp)
链接:https://ac.nowcoder.com/acm/contest/369/A 题目描述 若你摘得小的星星 你将得到小的幸福 若你摘得大的星星 你将得到大的财富 若两者都能摘得 你将得到 ...
- Python 分布式进程
#-*-coding:utf-8-*- '''分布式进程指的是将Process进程分不到多台机器上,充分利用多台机器的性能完成复杂的任务''' #服务器端 #--------------------- ...
- TCP的三次握手和四次挥手图解
1. TCP建立连接的三次握手 (1)第一次握手:Client将标志位SYN置为1,随机产生一个值seq=J,并将该数据包发送给Server,Client进入SYN_SENT状态,等待Server确 ...
- 洛谷 P2158 仪仗队
欧拉函数入门题... 当然如果有兴趣也可以用反演做...类似这题 题意就是求,方阵从左下角出发能看到多少个点. 从0开始给坐标 发现一个点能被看到,那么横纵坐标互质. 然后求欧拉函数的前缀和,* 2 ...