Angular中父子组件传值@Input @Output @ViewChild最全面最简单的总结

父组件传递给子组件：

值传递方式：@Input既可以传递数据也可以传递方法

传递数据（不举例了）
传递方法

// 父组件定义方法
parentRun(){alert('这是父组件的 run 方法');
}

调用子组件时传入当前方法（是传递方法不是调用方法）

<app-header [msg]="msg" [run]="parentRun"></app-header>

子组件接收和使用父组件传过来的方法

import { Component, OnInit ,Input } from '@angular/core';export class HeaderComponent implements OnInit {@Input() msg:string @Input() run:any; // 接收父组件传递过来的方法parentRunconstructor() { } ngOnInit() {this.run(); // 子组件调用父组件的parentRun方法}}

子组件传递给父组件：

1、事件传递方式：@Output + EventEmitter事件传递的方式

子组件实例化装饰器修饰的EventEmitter实例，并在需要的时候发出传递事件的信号（可以传参）

import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';export class HeaderComponent implements OnInit {// 用EventEmitter和Output装饰器配合使用，<string>指定广播传递的参数类型变量@Output() private outer = new EventEmitter<string>(); sendParent(){this.outer.emit('msg from child'); // 广播传递数据给父组件}}

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

<!--一旦接收到子组件发出的事件传递信号后就会执行父组件中定义好的接收方法-->
<app-header (outer)="runParent($event)"></app-header> // 接收子组件传递过来的数据
runParent(msg:string){alert(msg);
}

2、主动获取：父组件通过局部变量获取子组件的引用，主动获取子组件的数据和方法

子组件定义如下：

export class FooterComponent implements OnInit { public msg:string;public msg: string;constructor() { } ngOnInit() {} footerRun(){alert('这是footer子组件的Run方法');}
}

父组件调用子组件的时候给子组件取个id标识

<app-footer #footer></app-footer>

2.1、可在页面上直接获取执行子组件的方法

<button (click)='footer.footerRun()'>获取子组件的数据</button>

2.2、在控制器controller中通过@ViewChild，引入为成员变量

import { Component, OnInit ,ViewChild} from '@angular/core';@ViewChild('footer') footerChild; // 在父组件的控制器中引用子组件run(){this.footerChild.footerRun(); // 在父组件的控制器中调用子组件的方法或变量}

Angular中父子组件传值@Input @Output @ViewChild最全面最简单的总结相关推荐

Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
Vue3中父子组件传值
vue3父子组件传值其实和vue2写法差不多父传子 Props,子传父 emit 父组件代码 <template><div><child :msg="msg& ...
六十一、Vue中父子组件传值和组件参数校验
@Author:Runsen @Date:2020/10/17 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的日积月累,需要强大 ...
vue子组件mounted不执行_vue中父子组件传值，解决钩子函数mounted只运行一次的问题...
因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. ...
Angular中父子组件之间父组件给子组件传值、传递方法、传递自己
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
vue父子组件传值之异步之后子组件无法拿到父组件传的值
在vue中父子组件传值是非常常见的,父组件给子组件传值使用的是props,子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值,在这里我们介绍的是子组件在异步请求回来的参数无法 ...
angular框架如何实现父子组件传值、非父子组件传值
文章目录 1.理解父子组件.非父子组件 2.父组件给子组件传值- -@input 3.父组件通过@ViewChild主动获取子组件的数据和方法 4.非父子组件如何传递数据 1.理解父子组件.非父子组件 ...
Angular父子组件传值
Angular父子组件传值 1 父组件向子组件传值 1 子组件操作 2 父组件操作 1 在ts文件中定义被传递的变量 2 在html文件绑定 2 子组件向父组件传值 1 子组件操作 2 父组件操作 1 ...
Angular 父子组件传值，非父子组件传值
一.子组件调用父组件,父组件给子组件传值引入Input header.component.ts import { Component, OnInit, Input, Output } from '@ ...

Angular中父子组件传值@Input @Output @ViewChild最全面最简单的总结

父组件传递给子组件：

子组件传递给父组件：

Angular中父子组件传值@Input @Output @ViewChild最全面最简单的总结相关推荐

最新文章

热门文章