学习笔记（四十四）：自定义组件@LocalBuilder装饰器-编程知识

学习笔记（四十四）：自定义组件@LocalBuilder装饰器

news/2025/2/24 10:17:12/文章来源:https://www.cnblogs.com/xqxacm/p/18566577

概述：

当开发者使用@Builder做引用数据传递时，会考虑组件的父子关系，使用了bind(this)之后，组件的父子关系和状态管理的父子关系并不一致。

为了解决组件的父子关系和状态管理的父子关系保持一致的问题，引入@LocalBuilder装饰器。

@LocalBuilder拥有和局部@Builder相同的功能，且比局部@Builder能够更好的确定组件的父子关系和状态管理的父子关系。

示例：

1、定义自定义组件

// 自定义组件
@Component
export struct CommonView{@State msg:string = "子 Child"@Builder customBuilder() {};@BuilderParam customBuilderParam:()=>void=this.customBuilderbuild() {Column() {this.customBuilderParam()}}
}

2、使用该自定义组件

import { CommonView } from "../components/CommonView";
@Entity
@Component
export struct Main {@State msg:string = "父Parent"// 通过this.componentBuilder的形式传给子组件@BuilderParam customBuilderParam，this指向在Child的label，即“Child”。
  @Builder customerBuilder(){Text(this.msg)}// 过this.componentBuilder的形式传给子组件@BuilderParam customBuilderParam，this指向Parent的label，即“Parent”。
  @LocalBuilder customerBuilder(){Text(this.msg)}build() {Column() {Text('Main')CommonView({customBuilderParam:this.customerBuilder})Text('End')}.width('100%').justifyContent(FlexAlign.Center)}
}