角中父子组件相互传参的方法

　　介绍

这篇文章将为大家详细讲解有关角中父子组件相互传参的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>一:父组件获取子组件的数据和方法

也就是说子组件给父组件传数据和方法

<强>通过ViewChild

演示例子:

父组件:新闻

子组件:标题

假如子组件头有个运行方法

run () { 　　,console.log(“我是标题里面的运行方法”); 　　以前,}

在父组件调用子组件头的运行方法

1,在父组件中调用子组件,并给子组件定义一个名称

& lt; app-header  # header> & lt;/app-header>

角中父子组件相互传参的方法

2,在父组件引入ViewChild

import {,组件,OnInit , ViewChild},得到“@angular/核心”;

3,利用属性装饰器ViewChild和刚才的子组件关联起来

@ViewChild(头) 　　标题:任何;

4,调用子组件的方法

getChildRun () { 　　this.Header.run (); 　　}

角中父子组件相互传参的方法

二:父组件给子组件传值-@input

演示例子:
父组件:家里
子组件:标题

父组件不仅可以给子组件传递简单的数据,还可把自己的方法以及整个父组件传给子组件

所以在子组件中可以调用父组件的方法

1,父组件调用子组件的时候传入数据

& lt; app-header [标题]=皌itle",(作业)=癶omeWork",,(主页)=& # 39;这个# 39;祝辞& lt;/app-header>

角中父子组件相互传参的方法

2,子组件引入输入模块

import {,组件,OnInit , Input },得到“@angular/核心”;

3,子组件中@Input接收父组件传过来的数据

export  class  HeaderComponent  implements  OnInit  { 　　,,,@Input(),标题:字符串 　　 　　,,,构造函数(),{,} 　　,,,ngOnInit (), {} 　　}

4,子组件中使用父组件的数据

这是头部组件——{

定义

{标题}}

角中父子组件相互传参的方法

5,子组件中使用父组件的方法

总结:

父传子:@input

子传父:ViewChild

三,子组件通过@Output触发父组件的方法

演示例子:
父组件:新闻
子组件:页脚

1,子组件引入输出和EventEmitter

import {,组件,OnInit ,输入,输出,EventEmitter},得到“@angular/核心”;

2,子组件中实例化EventEmitter

@Output () 　　外,private =new  EventEmitter (); 　　,/用EventEmitter 和,output 装饰器配合使用,指定类型变量/

3,子组件通过EventEmitter对象外实例广播数据

sendParent () { 　　,this.outer.emit (msg ,得到孩子的) 　　以前,}

角中父子组件相互传参的方法

4,父组件调用子组件的时候,定义接收事件,外就是子组件的EventEmitter对象外

文件:组件\新闻\ news.component.html

& lt; app-footer(外)=癵etFooterRun(数据)“在

角中父子组件相互传参的方法

5,父组件接收到数据会调用自己的getFooterRun方法,这个时候就能拿到子组件的数
文件:组件\新闻\ news.component.ts

//接收子组件传递过来的数据 　　,getFooterRun(数据){ 　　,console.log(数据); 　　,}

五、非父子组件通讯

1,公共的服务
2, Localstorage(推荐)
3,饼干

总结:

vue中关于发出的美元用法

1,父组件可以使用<强>属性把数据传给子组件,子组件通过道具接受。
2,子组件可以使用美元发出触发父组件的自定义事件。

vm。美元发出(事件的不同之处是,arg ),//触发当前实例上的事件 　　vm。美元(事件的不同之处是,fn );//监听事件事件后运行,fn;

角中父子组件相互传参的方法