1# @ohos.pluginComponent (PluginComponentManager) (System API) 2 3The **PluginComponentManager** module provides APIs for the **PluginComponent** user to request components and data and send component templates and data. For details about how to display the **PluginComponent** template, see [PluginComponent](arkui-ts/ts-basic-components-plugincomponent-sys.md). 4 5> **NOTE** 6> 7> - The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version. 8> 9> - This topic describes only system APIs provided by the module. For details about its public APIs, see [@ohos.pluginComponent (PluginComponentManager)](js-apis-plugincomponent.md). 10 11## Modules to Import 12 13```ts 14import { pluginComponentManager } from '@kit.ArkUI' 15``` 16 17### PushParameterForStage 18 19Sets the parameters to be passed in the **PluginManager.Push** API in the stage model. 20 21**Model restriction**: This API can be used only in the stage model. 22 23**System API**: This is a system API. 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27| Name | Type | Mandatory | Description | 28| --------- | ----------------------------------- | ---- | ---------------------------------------- | 29| owner | [Want](../apis-ability-kit/js-apis-application-want.md) | Yes | Ability information of the component provider. | 30| target | [Want](../apis-ability-kit/js-apis-application-want.md) | Yes | Ability information of the component user. | 31| name | string | Yes | Component name. | 32| data | [KVObject](js-apis-plugincomponent.md#kvobject) | Yes | Component data value. | 33| extraData | [KVObject](js-apis-plugincomponent.md#kvobject) | Yes | Additional data value. | 34| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. | 35 36### RequestParameterForStage 37 38Sets the parameters to be passed in the **PluginManager.Request** API in the stage model. 39 40**System API**: This is a system API. 41 42**Model restriction**: This API can be used only in the stage model. 43 44**System capability**: SystemCapability.ArkUI.ArkUI.Full 45 46| Name | Type | Mandatory | Description | 47| -------- | ----------------------------------- | ---- | ---------------------------------------- | 48| owner | [Want](../apis-ability-kit/js-apis-application-want.md) | Yes | Ability information of the component user. | 49| target | [Want](../apis-ability-kit/js-apis-application-want.md) | Yes | Ability information of the component provider. | 50| name | string | Yes | Name of the requested component. | 51| data | [KVObject](js-apis-plugincomponent.md#kvobject) | Yes | Additional data. | 52| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. Request communication is not triggered when **jsonPath** is not empty or not set. | 53 54### push 55 56push(param: PushParameterForStage, callback: AsyncCallback<void>): void 57 58Pushes the component and data to the component user. 59 60**System API**: This is a system API. 61 62**Model restriction**: This API can be used only in the stage model. 63 64**Parameters** 65| Name | Type | Mandatory | Description | 66| -------- | ---------------------------------------- | ---- | ------------ | 67| param | [PushParameterForStage](#pushparameterforstage) | Yes | Information about the component user. | 68| callback | AsyncCallback<void> | Yes | Asynchronous callback used to return the result. | 69 70**Example** 71 72```ts 73import { pluginComponentManager } from '@kit.ArkUI' 74pluginComponentManager.push( 75 { 76 owner: { 77 bundleName: "com.example.provider", 78 abilityName: "com.example.provider.MainAbility" 79 }, 80 target: { 81 bundleName: "com.example.provider", 82 abilityName: "com.example.provider.MainAbility", 83 }, 84 name: "ets/pages/plugin2.js", 85 data: { 86 "js": "ets/pages/plugin.js", 87 "key_1": 1111, 88 }, 89 extraData: { 90 "extra_str": "this is push event" 91 }, 92 jsonPath: "", 93 }, 94 (err, data) => { 95 console.log("push_callback:err: ", JSON.stringify(err)); 96 console.log("push_callback:data: ", JSON.stringify(data)); 97 console.log("push_callback: push ok!"); 98 } 99) 100``` 101 102### request 103 104request(param: RequestParameterForStage, callback: AsyncCallback<RequestCallbackParameters>): void 105 106Requests the component from the component provider. 107 108**System API**: This is a system API. 109 110**Model restriction**: This API can be used only in the stage model. 111 112**Parameters** 113 114| Name | Type | Mandatory | Description | 115| -------- | ---------------------------------------- | ---- | ----------------------------------- | 116| param | [RequestParameterForStage](js-apis-plugincomponent.md#requestcallbackparameters) | Yes | Information about the component request. | 117| callback | AsyncCallback<[RequestCallbackParameters](js-apis-plugincomponent.md#requestcallbackparameters) \| void> | Yes | Asynchronous callback used to return the requested data. | 118 119**Example** 120 121```ts 122import { pluginComponentManager } from '@kit.ArkUI' 123pluginComponentManager.request( 124 { 125 owner: { 126 bundleName: "com.example.provider", 127 abilityName: "com.example.provider.MainAbility" 128 }, 129 target: { 130 bundleName: "com.example.provider", 131 abilityName: "ets/pages/plugin2.js", 132 }, 133 name: "plugintemplate", 134 data: { 135 "key_1": " myapplication plugin component test", 136 }, 137 jsonPath: "", 138 }, 139 (err, data) => { 140 console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability) 141 console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source) 142 } 143) 144``` 145 146## About the external.json File 147 148The **external.json** file is created by developers. It stores component names and template paths in key-value pairs. The component name is used as the keyword, and the corresponding template path is used as the value. 149 150**Example** 151 152```json 153{ 154 "PluginProviderExample": "ets/pages/PluginProviderExample.js", 155 "plugintemplate2": "ets/pages/plugintemplate2.js" 156} 157 158``` 159