@@ -193,6 +193,195 @@ const AsyncComp = defineAsyncComponent({
193
193
194
194
** See also** : [ Dynamic and Async components] ( ../guide/component-dynamic-async.html )
195
195
196
+ ## resolveComponent
197
+
198
+ ::: warning
199
+ ` resolveComponent ` can only be used within render functions.
200
+ :::
201
+
202
+ Allows resolving a ` component ` by its name, if it is available in the current application instance.
203
+
204
+ Returns a ` Component ` or ` undefined ` when not found.
205
+
206
+ ``` js
207
+ const app = Vue .createApp ({})
208
+ app .component (' MyComponent' , {
209
+ /* ... */
210
+ })
211
+ ```
212
+
213
+ ``` js
214
+ import { resolveComponent } from ' vue'
215
+ render () {
216
+ const MyComponent = resolveComponent (' MyComponent' )
217
+ }
218
+ ```
219
+
220
+ ### Arguments
221
+
222
+ Accepts one argument: ` component `
223
+
224
+ #### component
225
+
226
+ - ** Type:** ` String `
227
+
228
+ - ** Details:**
229
+
230
+ The name of a loaded component.
231
+
232
+ ## resolveDirective
233
+
234
+ ::: warning
235
+ ` resolveDirective ` can only be used within render functions.
236
+ :::
237
+
238
+ Allows resolving a ` directive ` by its name, if it is available in the current application instance.
239
+
240
+ Returns a ` Directive ` or ` undefined ` when not found.
241
+
242
+ ``` js
243
+ const app = Vue .createApp ({})
244
+ app .directive (' highlight' , {})
245
+ ```
246
+
247
+ ``` js
248
+ import { resolveDirective } from ' vue'
249
+ render () {
250
+ const highlightDirective = resolveDirective (' highlight' )
251
+ }
252
+ ```
253
+
254
+ ### Arguments
255
+
256
+ Accepts one argument: ` name `
257
+
258
+ #### name
259
+
260
+ - ** Type:** ` String `
261
+
262
+ - ** Details:**
263
+
264
+ The name of a loaded directive.
265
+
266
+ ## withDirectives
267
+
268
+ ::: warning
269
+ ` withDirectives ` can only be used within render functions.
270
+ :::
271
+
272
+ Allows applying directives to a ** VNode** . Returns a VNode with the applied directives.
273
+
274
+ ``` js
275
+ import { withDirectives , resolveDirective } from ' vue'
276
+ const foo = resolveDirective (' foo' )
277
+ const bar = resolveDirective (' bar' )
278
+
279
+ return withDirectives (h (' div' ), [
280
+ [foo, this .x ],
281
+ [bar, this .y ]
282
+ ])
283
+ ```
284
+
285
+ ### Arguments
286
+
287
+ Accepts two arguments: ` vnode ` and ` directives ` .
288
+
289
+ #### vnode
290
+
291
+ - ** Type:** ` vnode `
292
+
293
+ - ** Details:**
294
+
295
+ A virtual node, usually created with ` h() ` .
296
+
297
+ #### directives
298
+
299
+ - ** Type:** ` Array `
300
+
301
+ - ** Details:**
302
+
303
+ An array of directives.
304
+
305
+ Each directive itself is an array, which allows for up to 4 indexes to be defined as seen in the following examples.
306
+
307
+ - ` [directive] ` - The directive by itself. Required.
308
+
309
+ ``` js
310
+ const MyDirective = resolveDirective (' MyDirective' )
311
+ const nodeWithDirectives = withDirectives (
312
+ h (' div' ),
313
+ [ [MyDirective] ]
314
+ )
315
+ ```
316
+
317
+ - ` [directive, value] ` - The above, plus a value of type ` any ` to be assigned to the directive
318
+
319
+ ``` js
320
+ const MyDirective = resolveDirective (' MyDirective' )
321
+ const nodeWithDirectives = withDirectives (
322
+ h (' div' ),
323
+ [ [MyDirective, 100 ] ]
324
+ )
325
+ ```
326
+
327
+ - ` [directive, value, arg] ` - The above, plus a ` String ` argument, ie. ` click ` in ` v-on:click `
328
+
329
+ ``` js
330
+ const MyDirective = resolveDirective (' MyDirective' )
331
+ const nodeWithDirectives = withDirectives (
332
+ h (' div' ),
333
+ [ [MyDirective, 100 , ' click' ] ]
334
+ )
335
+ ```
336
+
337
+ - ` [directive, value, arg, modifiers] ` - The above, plus a ` key: value ` pair ` Object ` defining any modifiers.
338
+
339
+ ``` js
340
+ const MyDirective = resolveDirective (' MyDirective' )
341
+ const nodeWithDirectives = withDirectives (
342
+ h (' div' ),
343
+ [ [MyDirective, 100 , ' click' , { prevent: true }] ]
344
+ )
345
+ ```
346
+
347
+ ## createRenderer
348
+
349
+ The createRenderer function accepts two generic arguments:
350
+ ` HostNode ` and ` HostElement ` , corresponding to Node and Element types in the
351
+ host environment.
352
+
353
+ For example, for runtime-dom, HostNode would be the DOM
354
+ ` Node ` interface and HostElement would be the DOM ` Element ` interface.
355
+
356
+ Custom renderers can pass in the platform specific types like this:
357
+ ``` js
358
+ import { createRenderer } from ' vue'
359
+ const { render , createApp } = createRenderer< Node , Element > ({
360
+ patchProp,
361
+ ... nodeOps
362
+ })
363
+ ```
364
+
365
+ ### Arguments
366
+
367
+ Accepts two arguments: ` HostNode ` and ` HostElement `
368
+
369
+ #### HostNode
370
+
371
+ - ** Type:** ` Node `
372
+
373
+ - ** Details:**
374
+
375
+ The node in the host environment.
376
+
377
+ #### HostElement
378
+
379
+ - ** Type:** ` Element `
380
+
381
+ - ** Details:**
382
+
383
+ The element in the host environment.
384
+
196
385
## nextTick
197
386
198
387
Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.
0 commit comments