场景

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建组件以及组件之间的调用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通过以上搭建起Angular项目。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

新建两个组件，父组件parent和子组件child

ng g component components/child

ng g component components/parent

父组件给子组件传递简单的数据

首先在父组件parent中的ts中声明一个简单的字符串变量

public msg:string = "你妈叫你回家吃饭";

然后在父组件的html中调用子组件的时候传入数据

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

左边是传递的标识变量，右边是父组件的数据变量

然后在子组件的ts中引入input模块

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

然后在子组件的ts中使用@Input接收父组件传过来的数据

@Input() msg:string

这里的msg要与上面父组件传递的左边的msg相对应

然后就可以在子组件的html中使用接收的数据

<h2>{{msg}}</h2>

运行项目看效果

父组件传递方法给子组件(子组件调用父组件的方法)

同上面父组件传递简单的数据给子组件一样，还可以将父组件的方法传递给子组件

首先在子组件中声明一个run方法

  run(){alert("调用了父组件的run方法");}

然后在父组件调用子组件时传递方法

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

同样在子组件中引入input

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

然后在子组件中接收方法

@Input() run:any

在子组件的html中添加一个button

<button (click) = "getParentRun()">调用父组件的方法</button>

并给button添加一个点击事件，在此点击事件中调用接收的run方法

  getParentRun(){this.run();}

效果

父组件将自己传递给子组件

跟上面将父组件的方法传递给子组件一样，还可以将父组件整个传递给子组件

只需要在父组件调用子组件时传递下this

<app-child [msg]="msg" [run] ="run" [baba]="this"></app-child>

然后在子组件中接收this

@Input() baba:any

就可以直接调用父组件的属性和方法了

  getParentRun(){//this.run();this.baba.run();alert(this.baba.msg);}

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

Angular中父子组件传值@Input @Output @ViewChild最全面最简单的总结
父组件传递给子组件: 值传递方式:@Input既可以传递数据也可以传递方法传递数据(不举例了) 传递方法 // 父组件定义方法 parentRun(){alert('这是父组件的 run 方法'); ...
四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后，传递给子组件不显示...
有两个组件:一个为 transaction(父组件),一个为 transactionList (子组件): 上图为一个列表页,为父组件,在父组件里面的data中定义了数据列表, template中: ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
【Android TV 开发】焦点处理 ( 父容器与子组件焦点获取关系处理 | 不同电视设备上的兼容问题 | 触摸获取焦点 | 按键获取焦点 )
Android TV 开发系列文章目录 [Android TV 开发]安卓电视调试 ( 开启网络远程调试 ) [Android TV 开发]焦点处理 ( 父容器与子组件焦点获取关系处理 | 不同电视设 ...
vue 组件间的通信，子组件向父组件传值的方式总结
写vue,如果页面涉及到多个组件,就会涉及组件之间的通信,可能是父子组件间的通信,也可以是同级组件间的通信,那么,vue里面的组件如何通信.一般来说在vue的数据传递是在父组件传子组件通过属性来传,子 ...
vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题
vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题我们在开发vue项目的使用,会经常使用this这个关键字,this指向vue这个实例,我们可以使用this.来获取data里面 ...
vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例模仿v-model实现案例我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例这是父组件的东西.利用这个框改变值,看看有没 ...
artdialog4.1.7 中父页面给子页面传值
artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=" ",子页面用art.dialog.opener ...

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

场景

实现

父组件给子组件传递简单的数据

父组件传递方法给子组件(子组件调用父组件的方法)

父组件将自己传递给子组件

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

最新文章

热门文章