摘要:父组件向子组件传值文件目录父组件父组件我是传往子组件的值子组件使用修饰器去接收接收父组件的值这样就把值从父组件传到了子组件子组件向父组件传值子组件通过方法借助修饰器传值给父组件子组件我是传给父组件的值子组件点击传值给父组件父组件父
父组件向子组件传值 @Input
文件目录
父组件:
father.template.html
父组件
father.component.ts
import { Component, OnInit } from "@angular/core"; @Component({ selector: "cmt-father", templateUrl: "./father.template.html" }) export class FatherComponent implements OnInit { data: any = "我是传往子组件的值" ngOnInit() { } ngOnChanges() { } }
子组件:(使用@Input修饰器去接收)
childcomponent.ts
import { Component, OnInit, Input } from "@angular/core"; @Component({ selector: "cmt-child", templateUrl: "./child.template.html" }) export class ChildComponent implements OnInit { @Input() data: any;//接收父组件的值 ngOnInit() { console.log(this.data) } ngOnChanges() { console.log(this.data) } }
这样就把值从父组件传到了子组件!
子组件向父组件传值(子组件通过方法借助修饰器@output传值给父组件)
子组件
childcomponent.ts
import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; @Component({ selector: "cmt-child", templateUrl: "./child.template.html" }) export class ChildComponent implements OnInit { @Output("checked") checkedBack = new EventEmitter(); id:any ="我是传给父组件的值" ngOnInit() { } ngOnChanges() { } checkedCallback() { this.checkedBack.emit(this.id); } }
child.template.html.html
子组件
父组件
father.template.html
父组件
father.component.ts
import { Component, OnInit } from "@angular/core"; @Component({ selector: "cmt-father", templateUrl: "./father.template.html" }) export class FatherComponent implements OnInit { ngOnInit() { } ngOnChanges() { } checkedBack(event) { console.log(event) } }
这样子组件通过点击就把值传递给了父组件!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100181.html
摘要:老王用笔在纸上写了好多内容,把纸纸相当于,也就是数据放进了信封信封相当于属性,也就是里,然后给了邮局相当于相当于一个中介,快递员进行派送,小明来到邮箱相当于,看到里边有封信相当于父组件的值,拿了出来。 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过props属性来实现父组件: import childComponent from ...
1、父组件向子组件传递数据 父组件: 父组件:{{ msg }} import Child from ./Child export default { name: Parent, data () { return { msg: Hello world } } } 子组件: ...
摘要:子,父组件相互传值。就這样取到了子组件的值。其他情况也类似的处理。 1、子,父组件相互传值。 话不多说直接上代码:父组件向子组件传值就是通过子组件定义的props子组件: @import ../../../assets/css/jedate.css; import ../../../assets/js/jquery.jedate.min e...
摘要:子组件也属于当前实例。监听钩子函数的场景使用的不多,但是还是要知道的。可以获取到父组件传递的除和外的所有自定义属性。 一. 父组件向子组件传值 创建parent和child组件,并在parent中注册child组件 在父组件调用子组件标签中添加一个自定义属性(msg), im...
阅读 3567·2020-12-03 17:42
阅读 2718·2019-08-30 15:54
阅读 2193·2019-08-30 15:44
阅读 535·2019-08-30 14:08
阅读 934·2019-08-30 14:00
阅读 1082·2019-08-30 13:46
阅读 2763·2019-08-29 18:33
阅读 2724·2019-08-29 14:11