資訊專欄INFORMATION COLUMN
摘要：父組件向子組件傳值文件目錄父組件父組件我是傳往子組件的值子組件使用修飾器去接收接收父組件的值這樣就把值從父組件傳到了子組件子組件向父組件傳值子組件通過方法借助修飾器傳值給父組件子組件我是傳給父組件的值子組件點(diǎn)擊傳值給父組件父組件父
父組件向子組件傳值 @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)
}
}
這樣子組件通過點(diǎn)擊就把值傳遞給了父組件！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/100181.html
摘要：老王用筆在紙上寫了好多內(nèi)容，把紙紙相當(dāng)于，也就是數(shù)據(jù)放進(jìn)了信封信封相當(dāng)于屬性，也就是里，然后給了郵局相當(dāng)于相當(dāng)于一個(gè)中介，快遞員進(jìn)行派送，小明來到郵箱相當(dāng)于，看到里邊有封信相當(dāng)于父組件的值，拿了出來。 講故事前先講代碼 父組件向子組件傳值 父組件數(shù)據(jù)傳遞給子組件可以通過props屬性來實(shí)現(xiàn)父組件： import childComponent from ...
1、父組件向子組件傳遞數(shù)據(jù) 父組件： 父組件：{{ 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...
摘要：子組件也屬于當(dāng)前實(shí)例。監(jiān)聽鉤子函數(shù)的場(chǎng)景使用的不多，但是還是要知道的?？梢垣@取到父組件傳遞的除和外的所有自定義屬性。 一. 父組件向子組件傳值 創(chuàng)建parent和child組件，并在parent中注冊(cè)child組件 在父組件調(diào)用子組件標(biāo)簽中添加一個(gè)自定義屬性(msg)， im...
閱讀 3596·2020-12-03 17:42
閱讀 2768·2019-08-30 15:54
閱讀 2223·2019-08-30 15:44
閱讀 571·2019-08-30 14:08
閱讀 970·2019-08-30 14:00
閱讀 1103·2019-08-30 13:46
閱讀 2784·2019-08-29 18:33
閱讀 2886·2019-08-29 14:11
