diff --git a/zh-cn/application-dev/quick-start/arkts-prop.md b/zh-cn/application-dev/quick-start/arkts-prop.md index 171f1fb43bd8ef6eff28e32e642c89e73037743f..fe4f7ebda442a59c915b26f90b56620220d5583b 100644 --- a/zh-cn/application-dev/quick-start/arkts-prop.md +++ b/zh-cn/application-dev/quick-start/arkts-prop.md @@ -419,7 +419,7 @@ class Book { @Component struct ReaderComp { - @Prop book: Book; + @Prop book: Book = new Book("", 1); build() { Row() { @@ -442,10 +442,10 @@ struct Library { ReaderComp({ book: this.allBooks[2] }) Divider() Text('Books on loaan to a reader') - ForEach(this.allBooks, book => { + ForEach(this.allBooks, (book: Book) => { ReaderComp({ book: book }) }, - book => book.id) + (book: Book) => book.id.toString()) Button('Add new') .onClick(() => { this.allBooks.push(new Book("The C++ Standard Library", 512)); @@ -579,6 +579,26 @@ class ClassB { 以下组件层次结构呈现的是@Prop嵌套场景的数据结构。 ```ts +// 以下是嵌套类对象的数据结构。 +@Observed +class ClassA { + public title: string; + + constructor(title: string) { + this.title = title; + } +} + +@Observed +class ClassB { + public name: string; + public a: ClassA; + + constructor(name: string, a: ClassA) { + this.name = name; + this.a = a; + } +} @Entry @Component @@ -588,10 +608,10 @@ struct Parent { build() { Column() { Button('change') - .onClick(() => { - this.votes.name = "aaaaa" - this.votes.a.title = "wwwww" - }) + .onClick(() => { + this.votes.name = "aaaaa" + this.votes.a.title = "wwwww" + }) Child({ vote: this.votes }) } @@ -600,33 +620,33 @@ struct Parent { @Component struct Child { - @Prop vote: ClassB + @Prop vote: ClassB = new ClassB('', new ClassA('')); build() { - Column() { + Column() { - Text(this.vote.name).fontSize(36).fontColor(Color.Red).margin(50) - .onClick(() => { - this.vote.name = 'Bye' - }) - Text(this.vote.a.title).fontSize(36).fontColor(Color.Blue) - .onClick(() => { - this.vote.a.title = "openHarmony" - }) - Child1({vote1:this.vote.a}) + Text(this.vote.name).fontSize(36).fontColor(Color.Red).margin(50) + .onClick(() => { + this.vote.name = 'Bye' + }) + Text(this.vote.a.title).fontSize(36).fontColor(Color.Blue) + .onClick(() => { + this.vote.a.title = "openHarmony" + }) + Child1({vote1:this.vote.a}) - } + } } } @Component struct Child1 { - @Prop vote1: ClassA + @Prop vote1: ClassA = new ClassA(''); build() { Column() { - Text(this.vote1.title).fontSize(36).fontColor(Color.Red).margin(50) - .onClick(() => { - this.vote1.title = 'Bye Bye' - }) + Text(this.vote1.title).fontSize(36).fontColor(Color.Red).margin(50) + .onClick(() => { + this.vote1.title = 'Bye Bye' + }) } } }