advanced-api.md 4.3 KB
Newer Older
D
DCloud_LXH 已提交
1 2
# 进阶 API

D
DCloud_LXH 已提交
3
## 渲染函数
D
DCloud_LXH 已提交
4 5

<!-- VUEJSON.render_function.compatibility -->
D
DCloud_LXH 已提交
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

### 示例代码 @example

#### h()

创建虚拟 DOM 节点 (vnode)。

- 详细信息

  第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义。第二个参数是要传递的 prop,第三个参数是子节点。

  当创建一个组件的 vnode 时,子节点必须以插槽函数进行传递。如果组件只有默认槽,可以使用单个插槽函数进行传递。否则,必须以插槽函数的对象形式来传递。

  为了方便阅读,当子节点不是插槽对象时,可以省略 prop 参数。

D
DCloud_LXH 已提交
21
- 示例 [详情](<!-- VUEJSON.E_render-function.render_render.gitUrl -->)
D
DCloud_LXH 已提交
22

D
DCloud_LXH 已提交
23 24
::: preview <!-- VUEJSON.E_render-function.render_render.webUrl -->
<!-- VUEJSON.E_render-function.render_render.code -->
D
DCloud_LXH 已提交
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
:::

#### mergeProps()

合并多个 props 对象,用于处理含有特定的 props 参数的情况。

- 详细信息

  mergeProps() 支持以下特定 props 参数的处理,将它们合并成一个对象。

  - class
  - style
  - onXxx 事件监听器——多个同名的事件监听器将被合并到一个数组。
  如果你不需要合并行为而是简单覆盖,可以使用原生 object spread 语法来代替。

D
DCloud_LXH 已提交
40
- 示例 [详情](<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.gitUrl -->)
D
DCloud_LXH 已提交
41

D
DCloud_LXH 已提交
42
::: preview <!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.webUrl -->
D
DCloud_LXH 已提交
43

D
DCloud_LXH 已提交
44 45
> 选项式 API
<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.code -->
D
DCloud_LXH 已提交
46

D
DCloud_LXH 已提交
47 48 49
> 组合式 API
<!-- VUEJSON.E_render-function.mergeProps_mergeProps-composition.code -->
:::
D
DCloud_LXH 已提交
50 51 52 53 54 55 56 57 58 59 60 61 62

#### cloneVNode()

克隆一个 vnode。

- 详细信息

  返回一个克隆的 vnode,可在原有基础上添加一些额外的 prop。

  Vnode 被认为是一旦创建就不能修改的,你不应该修改已创建的 vnode 的 prop,而应该附带不同的/额外的 prop 来克隆它。

  Vnode 具有特殊的内部属性,因此克隆它并不像 object spread 一样简单。cloneVNode() 处理了大部分这样的内部逻辑。

D
DCloud_LXH 已提交
63 64 65 66 67 68 69 70 71 72 73
- 示例 [详情](<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.gitUrl -->)

::: preview <!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.webUrl -->

> 选项式 API
<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.code -->

> 组合式 API
<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-composition.code -->
:::

D
DCloud_LXH 已提交
74 75 76 77
#### isVNode()

判断一个值是否为 vnode 类型。

D
DCloud_LXH 已提交
78 79 80 81 82 83 84 85 86 87 88
- 示例 [详情](<!-- VUEJSON.E_render-function.isVNode_isVNode-options.gitUrl -->)

::: preview <!-- VUEJSON.E_render-function.isVNode_isVNode-options.webUrl -->

> 选项式 API
<!-- VUEJSON.E_render-function.isVNode_isVNode-options.code -->

> 组合式 API
<!-- VUEJSON.E_render-function.isVNode_isVNode-composition.code -->
:::

D
DCloud_LXH 已提交
89 90 91 92 93 94 95 96 97 98 99 100
#### resolveComponent()

按名称手动解析已注册的组件。

- 详细信息

  备注:如果你可以直接引入组件就不需使用此方法。

  为了能从正确的组件上下文进行解析,`resolveComponent()` 必须在 `setup()` 或渲染函数内调用。

  如果组件未找到,会抛出一个运行时警告,并返回组件名字符串。

D
DCloud_LXH 已提交
101 102 103 104 105 106 107 108 109 110 111
- 示例 [详情](<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.gitUrl -->)

::: preview <!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.webUrl -->

> 选项式 API
<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.code -->

> 组合式 API
<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-composition.code -->
:::

D
DCloud_LXH 已提交
112 113 114 115
#### withDirectives()

用于给 vnode 增加自定义指令。

D
DCloud_LXH 已提交
116
- 详细信息
D
DCloud_LXH 已提交
117 118 119

  用自定义指令包装一个现有的 vnode。第二个参数是自定义指令数组。每个自定义指令也可以表示为 `[Directive, value, argument, modifiers]` 形式的数组。如果不需要,可以省略数组的尾元素。

D
DCloud_LXH 已提交
120 121 122 123 124 125 126 127 128 129 130
- 示例 [详情](<!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.gitUrl -->)

::: preview <!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.webUrl -->

> 选项式 API
<!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.code -->

> 组合式 API
<!-- VUEJSON.E_render-function.withDirectives_withDirectives-composition.code -->
:::

D
DCloud_LXH 已提交
131 132 133
#### withModifiers()

用于向事件处理函数添加内置 [v-on](./built-in.md#v-on) 修饰符。