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，这是子组件的数据。