Angular子父组件之间的值传递详解

谁践踏了优雅 2023-03-02 10:56 12阅读 0赞

# 子组件获得父组件的数据 #

从两个方向来详解这个操作，以父组件中有一个msg传入子组件中形成一个标题元素为例。

**对于子组件：**

1.需要引入Input

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

2.定义这个传入的msg

@Input() message:any;

3，关于显示问题，子组件和父组件都有对应的html文件，此时子组件的html应当是展示出这个数据

<p>{
       {message}}</p>

** 对于父组件：**

1.也需要定义这个传出到子组件的参数

msg = "父组件传入给子组件的值"

2.父组件的html修改如下

<app-testmodule [message]="msg" ></app-testmodule>

左边中括号内message相当于在子组件中定义的message，这里是把右边父组件中msg的值绑定给了子组件，这个步骤是子父组件传值的桥梁。

# 父组件获得子组件的数据 #

## 1，通过ViewChild ##

**对于父组件：**

只需要调用ViewChild 连接子组件

@ViewChild("组件名字") child : any;

假设有一个子组件方法为run()或者子组件数据为value，使用如下方法调用

this.组件名字.run();
    this.组件名字.value;

**对于子组件 ：**

需要在子组件中定义好上述值和方法，然后再父组件的html中定义好自己的id

## 2，通过Output和EventEmitter ##

**对于子组件：**

需要引入output和EventEmitter，随后定义这个驱动事件EventEmitter

@Output outer = new EventEmitter();

然后定义一个方法传递这个

send(){
        this.outer.emit(“数据”);
        }

**对于父组件：**

只需要在引入子组件模块的时候作如下定义

<app-child #child  (outer)="run($event)"></app-child>
    
    //父组件中的run方法
    run(e){
    console(e);
    }
    //这里父组件通过这个outer连接到子组件，然后接收了传递过来的值"数据"，随后把这个打印在了控制台

![202007301356175.png][]

[202007301356175.png]: /images/20230208/a529a364d78c4d2a93e9824c3ae4c89b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue父组件传递值给子组件

vue父组件传递值给子组件子组件 <template> <div>{ { parentMsg}}</div

阳光穿透心脏的1/2处/ 2024年04月03日 12:03/ 0 赞/ 115 阅读

相关 Angular中父子组件之间父组件给子组件传值、传递方法、传递自己

场景 Angular介绍、安装Angular Cli、创建Angular项目入门教程： [https://blog.csdn.net/BADAO\_LIUMANG\_Q

àì夳堔傛蜴生んèń/ 2023年10月06日 08:51/ 0 赞/ 22 阅读

相关父组件向子组件传递数据

既然存在父子关系，所以，肯定是在父组件中调用了子组件。而父组件向子组件传递的数据，可以通过在子组件上定义属性，将数据传递给自定义属性的值的方式，来实现父组件向子组件传递数据

太过爱你忘了你带给我的痛/ 2023年08月17日 17:09/ 0 赞/ 174 阅读

相关 vue中父组件向子组件传递值、方法

> 在vue中子组件是默认无法访问到父组件data中的数据和methods中的方法的,所以我们需要使用特定的方法来完成它。一、父组件向子组件传值通过 props

ゝ一世哀愁。/ 2023年07月13日 11:00/ 0 赞/ 193 阅读

相关 vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

一、父组件调用子组件方法父组件代码 parent.vue <template> <div> <button @click="paren

﹏ヽ暗。殇╰゛Y/ 2023年06月01日 12:38/ 0 赞/ 20 阅读

相关 Angular子父组件之间的值传递详解

子组件获得父组件的数据从两个方向来详解这个操作，以父组件中有一个msg传入子组件中形成一个标题元素为例。对于子组件： 1.需要引入Input impor

谁践踏了优雅/ 2023年03月02日 10:56/ 0 赞/ 13 阅读

相关 Vue组件之间传值,父传子,子传父,兄弟之间传递

父组件向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收在props中使用驼峰形式，模板中需要使用短横线的形

╰半夏微凉°/ 2023年02月17日 02:58/ 0 赞/ 47 阅读

相关 Vue中父传子、子传父组件之间传值

在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们

Bertha 。/ 2022年04月17日 06:23/ 0 赞/ 318 阅读

相关初学react - 组件之间的传值（父传子、子传父、兄弟传值）

1、父组件向子组件传值：父组件通过属性的方式传递参数，子组件通过props来接收父组件传递过来的参数（1）父组件（直接定义一个属性传值即可） ![在这里插

Myth丶恋晨/ 2021年10月01日 06:56/ 0 赞/ 819 阅读

相关 React父组件与子组件之间的值传递

> 整体代码地址： > [https://github.com/klren0312/react\_study/blob/master/stu15/src/Father.js

妖狐艹你老母/ 2021年09月17日 12:18/ 0 赞/ 389 阅读