HarmonyOS 鸿蒙Next 使用@BuilderParam装饰器时父子组件传递状态属性实例

HarmonyOS 鸿蒙Next 使用@BuilderParam装饰器时父子组件传递状态属性实例 假设我们自定义了一个卡片，卡片有标题，有内容区。这个内容区可以在使用时自己进行填充，代码如下：

然后在使用时，可以像下面这样向这个自定义组件传递内容区，并传递父组件的状态属性以灵活控制子组件的内容区，如下：

注意：这里框住的第3处是关键，不能像官方文档中样例代码写的那样引用，官网文档写的不好，很容易导致this引用混乱（虽然提示了，但对很多初学者不友好）。

效果如下：

3 回复

官方文档中的样例代码如下：

cke_46697.png

这个样例是错误的，不会成功

更多关于HarmonyOS 鸿蒙Next 使用@BuilderParam装饰器时父子组件传递状态属性实例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢楼主解惑，正好碰到了这个问题，确实是官方文档里面有问题，照着写也没有数据更新。

在HarmonyOS鸿蒙Next中，@BuilderParam装饰器用于在父组件中传递一个构建函数给子组件，从而实现灵活的UI构建。通过@BuilderParam，父组件可以将状态属性传递给子组件，并在子组件中动态生成UI。

假设有一个父组件ParentComponent和一个子组件ChildComponent。父组件中定义了一个状态变量@State message: string = 'Hello from Parent'，并且通过@BuilderParam传递了一个构建函数给子组件。子组件接收这个构建函数，并在其内部使用。

示例代码如下：

// 父组件
@Component
struct ParentComponent {
  @State message: string = 'Hello from Parent';

  @Builder
  buildMessage() {
    Text(this.message)
      .fontSize(20)
      .fontColor(Color.Black)
  }

  build() {
    Column() {
      ChildComponent({ builderParam: this.buildMessage })
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  @BuilderParam builderParam: () => void;

  build() {
    Column() {
      this.builderParam()
    }
  }
}

在这个例子中，父组件ParentComponent通过@BuilderParam将buildMessage函数传递给子组件ChildComponent。子组件在build方法中调用this.builderParam()，从而渲染出父组件传递的Text组件，并显示message的内容。

通过这种方式，父组件可以灵活地将状态属性传递给子组件，并在子组件中动态生成UI。

回到顶部