angular,vue,react的父子通信

父子通信

• 父传子
  

vue:

父组件： //子组件的msg属性上加数据,datamsg是数据
子组件：export default {
props:["datamsg"] //子组件得到的数据，保存在props中
}
html:

{{msg}}

//在组件的html页面进行渲染
将父组件中的数据以属性形式放在父组件里面的子组件上，然后子组件再在vue的实例中通过props:[]去得到父组件传的数据。

react:

父组件： //子组件 传输的数据为datamsg
子组件：

{this.props.msg}

//子组件页面上渲染
将父组件中的值放在子组件上，子组件就可以通过this.props.属性名得到。

angular:

父组件：
js:
export class Father{ //在装饰器下面的类里写的数据。
msg="来自父组件的问候"
}
html:
<app-child [msg]="msg"> //放在子组件的属性上
子组件：
js:引入Input模块
export class child{
@Input() msg; //子组件得到数据
}
html:

{{msg}}

//子组件进行页面渲染
在父组件的类里面吧数据写好，然后在父组件里面的子组件标签上写上动态属性，子组件通过引入Input模块，写上@Input()这个装饰器。然后就可以得到数据。

• 子父通信

vue:

子组件：<button @click="giveData">//在子组件的button按钮上添加点击事件
export default {
data(){
return{
msg:"我是子组件的数据"
}
}
methods:{
giveData(){
this.emit("give-data",msg)//添加自定义事件
}
}
}

父组件： //在父组件的子组件标签上面添加自定义的方法
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)">//将子组件中的自定义事件绑定到父组件下面的子组件标签上。
ts:
export class Father{
handleDate(ev){
console.log(ev);//ev就是子组件所传递过来的数据
}
}

angular中的子父通信是通过emit自定义事件，需要引入output和eventEmitter两个模块，然后在父组件里面讲子组件绑定自定义事件。自定义事件必须要写上$event，这是子组件的数据。