HarmonyOS 鸿蒙Next 如何使用CustomerBuilder 封装组件时 在父组件定义的内容如何在子组件渲染 类似于Vue的插槽

HarmonyOS 鸿蒙Next 如何使用CustomerBuilder 封装组件时 在父组件定义的内容如何在子组件渲染 类似于Vue的插槽 如何使用CustomerBuilder 封装组件时 在父组件定义的内容如何在子组件渲染 类似于Vue的插槽

3 回复

楼主您好，@BuilderParam装饰器搭配@Builder函数可以实现插槽的功能。文档连接如下：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-builderparam-0000001524416541-V3

更多关于HarmonyOS 鸿蒙Next 如何使用CustomerBuilder 封装组件时 在父组件定义的内容如何在子组件渲染 类似于Vue的插槽的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


BuilderParam可以实现类似插槽功能

在HarmonyOS中，使用CustomerBuilder封装组件时，可以通过@BuilderParam属性实现父组件向子组件传递内容，类似于Vue的插槽功能。具体步骤如下：

  1. 定义子组件：在子组件中声明一个@BuilderParam属性，用于接收父组件传递的内容。

    [@Component](/user/Component)
struct ChildComponent {
  @BuilderParam content: () => void;

  build() {
    Column() {
      this.content(); // 渲染父组件传递的内容
    }
   }
}

  2. 在父组件中使用子组件：在父组件中，使用@Builder装饰器定义要传递的内容，并将其传递给子组件的@BuilderParam属性。

    [@Component](/user/Component)
struct ParentComponent {
  @Builder customContent() {
    Text('这是父组件传递的内容');
  }

  build() {
    Column() {
      ChildComponent({ content: this.customContent });
    }
   }
}
回到顶部