您现在的位置是:网站首页> 内容页

angular,vue,react的父子通信

  • 利来国际娱乐老牌平台
  • 2019-03-28
  • 22人已阅读
简介父子通信父传子vue:父组件:<child:msg="datamsg"></child>//子组件的msg属性上加数据,datamsg是数据子组件:exp

父子通信

父传子

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

文章评论

Top