页面卡槽和组件卡槽联合使用

注意

改变 this 指针

使用场景

A 页面想通过页面卡槽把数据传递给组件

实现方法

A 页面

ts


import Slot from '../components/Slot'

@Entry
@Component
struct Index3 {
    @State message: string = "这就是从父元素传递过来的"

    @Builder
    slotAll() {
        Text(this.message).fontSize(23).fontColor(Color.Red).onClick(() => {
            this.message = "改变了结果"
        })
    }

    build() {
        Column() {
            Slot({ slot: this.slotAll.bind(this) })
        }
    }
}

Slot 组件

ts


@Component
export default struct Slot {
    @BuilderParam
    slot: () => void = this.slotContent

    @Builder
    slotContent() {
        Text("默认").fontSize(26).fontColor(Color.Green)
    }

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