angular使用@output子组件获取父组件的数据和方法

1、子组件引入 Output 和 EventEmitter

import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';

<app-header (outer)="runParent($event)"></app-header>

2. 子组件中实例化 EventEmitter对象：outer

@Output() private outer=new EventEmitter<string>();
/*用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量*/

3、子组件通过 EventEmitter 对象 outer 实例广播数据

sendParent(){
// alert('zhixing');
this.outer.emit('msg from child')
}

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

5. 父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据

//接收子组件传递过来的数据
runParent(msg:string){
alert(msg);
}

angular使用@output子组件获取父组件的数据和方法相关推荐

angular使用@input子组件获取父组件的数据和方法
1使用@input传递数据 1.父组件使用自组件app-header传入msg数据. <app-header [msg]="msg"></app-header&g ...
vue 父组件、子组件对象改变_VUE里子组件获取父组件动态变化的值
在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在 ...
vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的？
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
子组件获取父组件的值，将这个值作为状态值保存
这是之前的一个想法,但是后来又思考了,如果我的子组件在很多地方都要调用,为什么不把获取数据的函数放在子组件里面,父组件有需要就直接调用子组件的方式就可以.转换一个思路.同时发现一个神奇的事情目前没有 ...
子组件获取父组件的数据（父传递数据给子）
父组件在调用子组件的时候,动态绑定数据 <List :todos='todos'/> 子组件在props中创建一个属性,用以接收父组件传过来的值 props: ['todos'] 3.在子 ...
vue子组件改变父组件的值
1 在父组件的coment绑定事件 <template><div :class="classObj" class="app-wrapper"& ...
Angular中父子组件之间父组件给子组件传值、传递方法、传递自己
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...
子组件向父组件传值，父组件获取子组件值
子组件如何传值给父组件? 父组件将一个方法赋值给一个属性props传递给子组件,子组件在函数被应用时调用父组件传来的属性并传值,父组件可在自身的函数中接受子组件传递过来的值. 父组件 //father ...

angular使用@output子组件获取父组件的数据和方法

angular使用@output子组件获取父组件的数据和方法相关推荐

最新文章

热门文章