HarmonyOS 鸿蒙Next 像vue一样的作用域插槽写法

HarmonyOS 鸿蒙Next 像vue一样的作用域插槽写法

@Entry @Component struct Parent { @Builder childRender(item: number[]) { Column() { List({ space: 20, initialIndex: 0 }) { ForEach(item, (item) => { ListItem() { Text(’’ + item) .width(‘100%’) .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) } }, item => item) } .listDirection(Axis.Vertical) // 排列方向 .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 .onScrollIndex((firstIndex: number, lastIndex: number) => { console.info(‘first’ + firstIndex) console.info(‘last’ + lastIndex) }) .width(‘90%’) } .width(‘100%’) .height(‘100%’) .backgroundColor(0xDCDCDC) .padding({ top: 5 }) }

build() { Column() { Text(‘类作用域插槽的写法’) Divider() Child({ render: (item) => this.childRender(item) }) } } }

@Component struct Child { @BuilderParam render: (item: number[]) => void item: number[] = [1, 2, 3, 4, 5, 6,7]

build() { Column() { Text(‘Child组件的render’) this.render(this.item) } } }


更多关于HarmonyOS 鸿蒙Next 像vue一样的作用域插槽写法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next 像vue一样的作用域插槽写法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，作用域插槽的写法可以通过@Component和@Builder装饰器来实现。@Builder用于定义一个可复用的UI构建函数，可以在父组件中通过this传递数据给子组件。子组件可以通过@Prop或@Link接收这些数据，并在模板中使用。

例如，定义一个子组件ChildComponent，使用@Builder接收父组件传递的数据：

@Component
struct ChildComponent {
  @BuilderParam content: Builder<{ item: string }>

  build() {
    Column() {
      this.content({ item: 'Hello from Child' })
    }
  }
}

在父组件中，可以通过@Builder传递数据给子组件：

@Component
struct ParentComponent {
  @Builder customBuilder(item: { item: string }) {
    Text(item.item)
  }

  build() {
    Column() {
      ChildComponent({
        content: this.customBuilder
      })
    }
  }
}

通过这种方式，父组件可以将数据传递给子组件，并在子组件的作用域内使用这些数据。

回到顶部