angular的传值，子传父，父传子

父传子：
先打开文件
在父组件的引入Input

import { Component, Input } from ‘@angular/core’;
在父组件的@Componentl里面写要传的数据（可以不写public）
在父组件的页面引用的组件里面写要传输的数据

子组件：
创建一个子组件

在子组件的home.component.ts也同样引入Input，
any是指数据是任意类型
@Input() msg:any;
最后在子组件的html页面显示父组件传的数据

<div>----{{msg}}</div>

子组件向父组件传值通过事件触发
Angular:子组件向父组件传值通过事件触发，

1.先在子组件引入Output,和EventEmitter,

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

实例化对象（@Output()暴露数据） @Output() childSend = new EventEmitter();做事件写要传输的数据（写在子组件中）这里写的send（）

@Output() childSend = new EventEmitter();
send(){this.childSend.emit("子组件的数据")
}

3.在子页面写一个触发事件的按钮

<button (click)="send()">子组件传值到父组件</button>

父组件：
父组件页面写接收的数据

<app-home (childSend)="getChild($event)"></app-home>

(childSend)="getChild($event)"把值传到组件

title = '子>父';
getChild(e:any){this.title=e;
}

效果

angular的传值，子传父，父传子相关推荐

react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
vue父组给子子组件传html,vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂作笔记-vue 通常页面的视图App.vue应为这样一.父组件向子组件传值浏览器 1.建立子组件,在src/components/文件夹下新建一个C ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
组件传值（子传父父传子）
Vue的组件传值父传子首先在父组件引入子组件,,然后在父组件中v-bind{函数名,要传的数值} 在子组件中需要一个接收器,props:{ 父组件的函数名} import menuNav from ...
react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
vue父子组件传值之异步之后子组件无法拿到父组件传的值
在vue中父子组件传值是非常常见的,父组件给子组件传值使用的是props,子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值,在这里我们介绍的是子组件在异步请求回来的参数无法 ...
vuejs 传参向子组件父组件_VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
VUE 子组件向父组件传值（含传多值以及添加额外参数场景）
一.子组件向父组件传递一个值子组件: this.$emit('change', this.value); 父组件:  <editable-ce ...
Angular中父子组件之间父组件给子组件传值、传递方法、传递自己
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...

angular的传值，子传父，父传子

angular的传值，子传父，父传子相关推荐

最新文章

热门文章