HarmonyOS 鸿蒙Next arkts如何实现多个插槽，麻烦请提供demo

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next arkts如何实现多个插槽，麻烦请提供demo

arkts如何实现多个插槽，麻烦请提供demo
 

Harmonyos Next教程
2 回复

类似js中的slot插槽功能，该功能在ArkTS中使用@Builder和@BuilderParam方式来实现 参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builderparam-0000001820999553 用@Builder插入内容，@Builder中使用if做条件渲染，demo如下：

@Component
struct Child {
  @State temp:boolean = true
  label: string = `Child`
  [@Builder](/user/Builder) FunABuilder0() {}
  [@Builder](/user/Builder) FunABuilder1() {}
  [@BuilderParam](/user/BuilderParam) aBuilder0: () => void = this.FunABuilder0;
  [@BuilderParam](/user/BuilderParam) aBuilder1: () => void = this.FunABuilder1;

  build() {
    Column() {
      this.aBuilder0()
      this.aBuilder1()
    }
  }
}

@Entry
@Component
struct Parent {
  label: string = `Parent`
  @State temp:boolean = true

  [@Builder](/user/Builder) componentBuilder() {
    Button('click')
      .onClick(()=>{
        this.temp = !this.temp
      })
    if(this.temp){
      Text(`${this.label}`)
    }
  }

  build() {
    Column() {
      this.componentBuilder()
      Child({temp: this.temp, aBuilder0: this.componentBuilder, aBuilder1: ():void=>{this.componentBuilder()} })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next arkts如何实现多个插槽，麻烦请提供demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，arkts（ArkUI TypeScript）实现多个插槽主要依赖于<slot>标签和组件的slots属性。以下是一个简单的demo，展示如何在自定义组件中实现和使用多个插槽：

自定义组件（MyComponent.ark）：

<template>
  <div class="container">
    <slot name="header"></slot>
    <div class="content">
      <slot></slot> <!-- 默认插槽 -->
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
</style>

使用自定义组件（App.ark）：

<template>
  <MyComponent>
    <template #header>
      <div>Header Content</div>
    </template>
    <div>Main Content</div>
    <template #footer>
      <div>Footer Content</div>
    </template>
  </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.ark';

export default {
  components: {
    MyComponent,
  },
};
</script>

上述代码展示了如何定义一个带有三个插槽（一个默认插槽和两个具名插槽）的自定义组件，并在父组件中使用这些插槽。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部