diff --git a/zh-cn/application-dev/reference/apis-arkui/figures/builderNode_consume.png b/zh-cn/application-dev/reference/apis-arkui/figures/builderNode_consume.png new file mode 100644 index 0000000000000000000000000000000000000000..7bbbff9d000047ea77320212172e4a488f19da19 Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/figures/builderNode_consume.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md index 9d04dd08efe6d8e41fda2af3f6fa48472c1ce71a..cdb2902f9340d5700a124984d7058ebbaf83dae2 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md @@ -10,10 +10,12 @@ > > 当前不支持在预览器中使用BuilderNode。 > -> BuilderNode下的自定义组件支持使用[@Prop](../../ui/state-management/arkts-prop.md)装饰器，不支持使用[@Reusable](../../ui/state-management/arkts-create-custom-components.md#自定义组件的基本结构)、[@Link](../../ui/state-management/arkts-link.md)、[@Provide](../../ui/state-management/arkts-provide-and-consume.md)、[@Consume](../../ui/state-management/arkts-provide-and-consume.md)装饰器。 +> BuilderNode下的自定义组件支持使用[@Prop](../../ui/state-management/arkts-prop.md)装饰器，不支持使用[@Reusable](../../ui/state-management/arkts-create-custom-components.md#自定义组件的基本结构)、[@Link](../../ui/state-management/arkts-link.md)。 > > 从API version 12开始，自定义组件支持接收[LocalStorage](../../ui/state-management/arkts-localstorage.md)实例。可以通过[传递LocalStorage实例](../../ui/state-management/arkts-localstorage.md#自定义组件接收localstorage实例)来使用LocalStorage相关的装饰器[@LocalStorageProp](../../ui/state-management/arkts-localstorage.md#localstorageprop)、[@LocalStorageLink](../../ui/state-management/arkts-localstorage.md#localstoragelink)。 > +> 从API version 20开始，通过配置[BuildOptions](#buildoptions12)，内部自定义组件的[@Consume](../../ui/state-management/arkts-provide-and-consume.md)支持接收所在页面的[@Provide](../../ui/state-management/arkts-provide-and-consume.md)数据。 +> > 其余装饰器行为未定义，不建议使用。 @@ -208,7 +210,8 @@ build的可选参数。 | 名称 | 类型 | 必填 | 说明 | | ------------- | -------------------------------------- | ---- | ------------------------------------------------------------ | | nestingBuilderSupported |boolean | 否 | 是否支持Builder嵌套Builder进行使用。其中，false表示Builder使用的入参一致，true表示Builder使用的入参不一致。默认值：false
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| -| localStorage20+ |[LocalStorage](../../ui/state-management/arkts-localstorage.md) | 否 | 给当前builderNode设置localStorage，挂载在此builderNode下的自定义组件共享该localStorage，如果自定义组件构造函数同时也传入localStorage，优先使用构造函数中传入的localStorage。默认值：null
**原子化服务API：** 从API version 20开始，该接口支持在原子化服务 +| localStorage20+ |[LocalStorage](../../ui/state-management/arkts-localstorage.md) | 否 | 给当前BuilderNode设置LocalStorage，挂载在此BuilderNode下的自定义组件共享该LocalStorage。如果自定义组件构造函数同时也传入LocalStorage，优先使用构造函数中传入的LocalStorage。默认值：null。
**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | +| enableProvideConsumeCrossing20+ | boolean | 否 | 定义BuilderNode内自定义组件的@Consume是否与所在页面的@Provide状态互通。true表示支持，false表示不支持。默认值：false。
**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。| ### InputEventType20+ @@ -1885,3 +1888,76 @@ struct TextBuilder { ``` ![inheritFreezeOptions](figures/builderNode_inheritFreezeOptions.gif) + +### 示例7（BuilderNode支持内部@Consume接收外部的@Provide数据） + +设置BuilderNode的BuildOptions中enableProvideConsumeCrossing为true，以实现BuilderNode内部自定义组件的@Consume与所在自定义组件的@Provide数据互通。 + +```ts +import { BuilderNode, NodeContent } from '@kit.ArkUI'; + +@Component +struct ConsumeChild { + @Consume @Watch("ChangeData") message: string = "" + + ChangeData() { + console.log(`ChangeData ${this.message}`); + } + + build() { + Column() { + Text(this.message) + .fontWeight(FontWeight.Bold) + .fontSize(20) + Button("Click to change message to append C") + .fontWeight(FontWeight.Bold) + .onClick(() => { + this.message = this.message + "C" + }) + } + } +} + +@Builder +function CreateText(textMessage: string) { + Column() { + Text(textMessage) + .fontWeight(FontWeight.Bold) + .fontSize(20) + ConsumeChild() + } +} + +@Entry +@Component +struct Index { + @Provide message: string = 'Hello World'; + private content: NodeContent = new NodeContent(); + private builderNode: BuilderNode<[string]> = new BuilderNode<[string]>(this.getUIContext()); + + aboutToAppear(): void { + this.builderNode.build(wrapBuilder(CreateText), "Test Consume", { enableProvideConsumeCrossing: true }) + this.content.addFrameNode(this.builderNode.getFrameNode()) + } + + build() { + Column() { + Text(this.message) + .fontWeight(FontWeight.Bold) + .fontSize(20) + Button("Click to change message to append I") + .fontWeight(FontWeight.Bold) + .onClick(() => { + this.message = this.message + "I"; + }) + Column() { + ContentSlot(this.content) + } + } + .height('100%') + .width('100%') + } +} +``` + +![enableProvideConsumeCrossing](figures/builderNode_consume.png) diff --git a/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-builderNode.md b/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-builderNode.md index 225578bcde4921015630d814ae319880f7f4383e..ab6b77daa7ee8068943a2bdb55998d99d1f0a4b1 100644 --- a/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-builderNode.md +++ b/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-builderNode.md @@ -1273,4 +1273,10 @@ struct TextBuilder { } ``` -![inheritFreezeOptions](figures/builderNode_inheritFreezeOptions.gif) \ No newline at end of file +![inheritFreezeOptions](figures/builderNode_inheritFreezeOptions.gif) + +## 设置BuilderNode支持内部@Consume接收外部的@Provide数据 + +从API version 20开始，通过配置BuildOptions参数，BuilderNode内部自定义组件的[@Consume](./state-management/arkts-provide-and-consume.md)支持接收所在页面的[@Provide](./state-management/arkts-provide-and-consume.md)数据。 + +参见[示例代码](../reference/apis-arkui/js-apis-arkui-builderNode.md#示例7buildernode支持内部consume接收外部的provide数据)。