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