@BuilderParam 装饰器

介绍

注意

1. 这个装饰器至关重要可以说@Builder就靠它来撑场子了

2. 只有用了这个装饰器才能在组件里面传递 HTML

3. @BuilderParam装饰器只能放用@Builder修饰的组件

全局

默认

• 父组件调用

import Header from '../views/Header'

@Entry
@Component
struct Index3 {
    build() {
        Column() {
            Header()
        }
    }
}

• 子组件

注意

1. 第一步 设定卡槽名称

2. 第二步 设定默认内容

@Preview
@Component
export default struct Header {
    // 接受到的html
    // 1 设定卡槽
    @BuilderParam
    solt: () => void = this.slotContent;

    // 2. 设定默认内容
    @Builder
    slotContent() {
        Text("哈哈哈").fontSize(48).fontColor(Color.Red)
    };
    build() {
        Column() {
            Text("这里面的就是头部自己的内容").fontSize(26)
            Divider()
            Text("下面是卡槽内容").fontSize(26)
            this.solt()
            Divider()
            Text("卡槽内容结束").fontSize(26)
        }
    }
}

传值

• 父组件调用

import Header from '../views/Header'

@Builder
function showNoParams() {
    Column() {
        Text("这就是父组件传递过来的html").fontSize(24).fontColor(Color.Red)
    }

}

@Entry
@Component
struct Index3 {
    build() {
        Column() {
            Header({ solt: showNoParams })
        }
    }
}

• 子组件使用

@Preview
@Component
export default struct Header {
    // 接受到的html
    // 1 设定卡槽
    @BuilderParam
    solt: () => void = this.slotContent;

    // 2. 设定默认内容
    @Builder
    slotContent() {
        Text("哈哈哈").fontSize(48).fontColor(Color.Red)
    };

    build() {
        Column() {
            Text("这里面的就是头部自己的内容").fontSize(26)
            Divider()
            Text("下面是卡槽内容").fontSize(26)
            this.solt()
            Divider()
            Text("卡槽内容结束").fontSize(26)
        }
    }
}

注意

1. 父组件调用子组件的时候，子组件的参数必须用对象的形式传递

2. 子组件的参数必须用@BuilderParam装饰器修饰的名称必须和父组件传递过来的一致

局部

默认

• 父组件调用

import Header from '../views/Header'

@Entry
@Component
struct Index3 {
    build() {
        Column() {
            Header()
        }
    }
}

• 子组件

注意

1. 第一步 设定卡槽名称

2. 第二步 设定默认内容

@Preview
@Component
export default struct Header {
    // 接受到的html
    // 1 设定卡槽
    @BuilderParam
    solt: () => void = this.slotContent;

    // 2. 设定默认内容
    @Builder
    slotContent() {
        Text("哈哈哈").fontSize(48).fontColor(Color.Red)
    };
    build() {
        Column() {
            Text("这里面的就是头部自己的内容").fontSize(26)
            Divider()
            Text("下面是卡槽内容").fontSize(26)
            this.solt()
            Divider()
            Text("卡槽内容结束").fontSize(26)
        }
    }
}

传值

• 父元素调用

import Header from '../views/Header'

@Entry
@Component
struct Index3 {
    @Builder
    slotOne() {
        Column() {
            Text("父元素给子元素传递的内容232").fontSize(24).fontColor(Color.Red)
        }
    }
    build() {
        Column() {
            Header({ slot: this.slotOne })
        }
    }
}

• 子组件使用

@Preview
@Component
export default struct Header {
    // 接受到的html
    // 1 设定卡槽
    @BuilderParam
    slot: () => void = this.slotContent;

    // 2. 设定默认内容
    @Builder
    slotContent() {
        Text("哈哈哈").fontSize(48).fontColor(Color.Red)
    };

    build() {
        Column() {
            Text("这里面的就是头部自己的内容").fontSize(26)
            Divider()
            Text("下面是卡槽内容").fontSize(26)
            this.slot()
            Divider()
            Text("卡槽内容结束").fontSize(26)
        }
    }
}