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

1使用@input传递数据

1、父组件使用自组件app-header传入msg数据。

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

2、子组件引入 Input

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

3、子组件中 @Input msg：string 接收父组件传过来的数据

export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() {
}
}

4、子组件使用父组件的数据

2使用@input传递数据

实现子组件调用父组件的方法

1、父组件定义方法

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

2、在使用自组件是传递方法 run()

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

3、子组件接收父组件的方法并使用过

export class HeaderComponent implements OnInit {
@Input() msg:string;
@Input() run:any;
constructor() { }
ngOnInit() {
this.run(); /*子组件调用父组件的 run 方法*/
}
}

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

vue 父组件、子组件对象改变_VUE里子组件获取父组件动态变化的值
在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在 ...
vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的？
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
angular使用@output子组件获取父组件的数据和方法
1.子组件引入 Output 和 EventEmitter import { Component, OnInit ,Input,Output,EventEmitter} from '@angular ...
子组件获取父组件的值，将这个值作为状态值保存
这是之前的一个想法,但是后来又思考了,如果我的子组件在很多地方都要调用,为什么不把获取数据的函数放在子组件里面,父组件有需要就直接调用子组件的方式就可以.转换一个思路.同时发现一个神奇的事情目前没有 ...
子组件获取父组件的数据（父传递数据给子）
父组件在调用子组件的时候,动态绑定数据 <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使用@input子组件获取父组件的数据和方法

1使用@input传递数据

2使用@input传递数据

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

最新文章

热门文章