HarmonyOS父子组件转达参数

HarmonyOS父子组件转达参数

1. 使用@State和@Prop举行父子组件转达———注意是单向同步

@Prop装饰器：父子单向同步

  

• 注意：只支持单向同步，同时也只能支持string\number\boolean\enum比力简单的范例。
  
  
  
  

代码

1. // 使用 props 进行父子组件传值
2. @Component
3. struct SonCom {
4.    
5.    
6.   // 父子间传递过来的数据使用 @Prop 进行接受
7.   @Prop sonCar: string
8.   // 修改传递的参数
9.   changeInfo = (info: string)=> {
10.    
11.    }
12.   build() {
13.    
14.    
15.     Column() {
16.    
17.    
18.       Text(`这是子组件的盒子--- ${
19.      
20.      this.sonCar}`)
22.       Button('子组件修改父组件的数据').onClick((event: ClickEvent) => {
23.    
24.    
25.         this.changeInfo('吉利银河 L7 ----' + Math.ceil(Math.random() * 10))
26.       })
27.     }
28.     .width('100%')
29.     .height(100)
30.     .backgroundColor(Color.Orange)
31.   }
32. }
34. @Entry
35. @Component
36. struct PropsPage {
37.    
38.    
39.   @State info: string = '比亚迪 宋'
41.   changeInfo = (newInfo: string)=>{
42.    
43.    
44.     this.info = newInfo
45.   }
47.   build() {
48.    
49.    
50.     Column({
51.    
52.     space: 20}) {
53.    
54.    
55.       Text(`这是父组件的盒子 ${
56.      
57.      this.info}`)
59.       Button('修改父组件的数据').onClick((event: ClickEvent) => {
60.    
61.    
62.         this.info = '领克 08---' + Math.ceil(Math.random() * 10)
63.       })
64.       // 这是子组件
65.       SonCom({
66.    
67.    
68.         sonCar: this.info,
69.         changeInfo: this.changeInfo
70.       })
71.     }
72.     .width('100%')
73.     .height(300)
74.     .backgroundColor(Color.Pink)
75.   }
76. }

复制代码

演示

2. @Link装饰器：父子双向同步

@Link装饰器：父子双向同步

  

• 注意
  
  
  
  

1. // 子组件
2. @Component
3. struct ChildCom {
4.    
5.    
6.   @Link list: number[]
8.   build() {
9.    
10.    
11.     Column() {
12.    
13.    
15.       List({
16.    
17.    space: 10}) {
18.    
19.    
20.         ForEach

复制代码