Skip to content

Commit d3ad441

Browse files
authored
add resolveComponent, resolveDirective, createRenderer and withDirectives to global API (vuejs#255)
* add resolveComponent, resolveDirective and withDirectives * fix setup to render * add createRenderer * fix indentation, add examples, fix args
1 parent 1ba104e commit d3ad441

File tree

1 file changed

+189
-0
lines changed

1 file changed

+189
-0
lines changed

src/api/global-api.md

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,195 @@ const AsyncComp = defineAsyncComponent({
193193

194194
**See also**: [Dynamic and Async components](../guide/component-dynamic-async.html)
195195

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+
196385
## nextTick
197386

198387
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

Comments
 (0)