自定义组件的传值和绑定

HarmonyOS

chmqn

2024-05-26 11:51:22

浏览

回答 1

待解决

回答 1

按赞同

按时间

jmzgh

本文主要介绍关于图片的多宫格布局，在我们开发过程中，为了减少代码量，增加复用，需要使用自定义组件，使用自定义组件避免不了父控件跟子控件的联动，那么传值和绑定会减少很多工作量。

使用的核心API

Link

核心代码解释

1.@Component struct修饰一个自定义组件,在自定义组件中写一个私有变量，在build()方法中放置一个TextInput，这样一个自定义View就写好了。

@Component 
struct LoginInput { 
  private hint: string = '请输入账号密钥'; 
  build() { 
    TextInput({placeholder:this.hint}) 
  } 
}

2.在使用的时候如下，我们在自定义组件中写的变量，在使用时可以直接在构造方法中传值，实现父组件向子组件传值。

LoginInput({hint:'请输入账号'}) 
LoginInput({hint:'请输入密钥'})

3.更进一步，我们想将子组件与父组件的变量绑定起来，实现其中一个变量改变，对应的变量也做同步的改变，可以做如下操作：

将子组件的变量需要用@Link修饰，且不能初始化
将父组件的变量需要用@State修饰。
传值的时候使用$符号修饰。

import Prompt from '@system.prompt' 
  
@Entry 
@Component 
struct Index { 
  //父组件的变量需要用@State修饰 
  @State inputUserName:string ='张三' 
  @State inputUserPsw:string ='张三' 
  build() { 
    Row() { 
      Column() { 
        Text(this.inputUserName).fontSize(20) 
        // 使用子组件传值的时候用$传递 
        LoginInput({hint:'请输入账号',inputVale:$inputUserName}) 
        LoginInput({hint:'请输入账号',inputVale:$inputUserPsw}) 
  
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
  
} 
@Component 
struct LoginInput { 
  private hint: string = '请输入账号密钥'; 
  //子组件的变量需要用@Link修饰，且不能初始化 
  @Link inputVale: string; 
  build() { 
    TextInput({placeholder:this.hint,text:this.inputVale}) 
      .onChange((value)=>{ 
        this.inputVale= value; 
        Prompt.showToast({message:value}) 
      }) 
  } 
}

适配的版本信息

IDE版本：4.0.1.501

SDK版本：OpenHarmony4.0.10.8