渲染函式 API

h()

建立虛擬 DOM 節點（vnode）。

型別

// full signature
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode

// omitting props
function h(type: string | Component, children?: Children | Slot): VNode

type Children = string | number | boolean | VNode | null | Children[]

type Slot = () => Children

type Slots = { [name: string]: Slot }

型別已簡化以提高可讀性。

詳細資訊
第一個引數可以是字串（用於原生元素）或 Vue 元件定義。第二個引數是要傳遞的屬性，第三個引數是子節點。
在建立元件 vnode 時，子節點必須以槽函式的形式傳遞。如果元件只期望預設槽，則可以傳遞單個槽函式。否則，槽必須以槽函式的物件形式傳遞。
為了方便，如果子節點不是槽物件，則可以省略屬性引數。

示例

建立原生元素

import { h } from 'vue'

// all arguments except the type are optional
h('div')
h('div', { id: 'foo' })

// both attributes and properties can be used in props
// Vue automatically picks the right way to assign it
h('div', { class: 'bar', innerHTML: 'hello' })

// class and style have the same object / array
// value support like in templates
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// event listeners should be passed as onXxx
h('div', { onClick: () => {} })

// children can be a string
h('div', { id: 'foo' }, 'hello')

// props can be omitted when there are no props
h('div', 'hello')
h('div', [h('span', 'hello')])

// children array can contain mixed vnodes and strings
h('div', ['hello', h('span', 'hello')])

建立元件

import Foo from './Foo.vue'

// passing props
h(Foo, {
  // equivalent of some-prop="hello"
  someProp: 'hello',
  // equivalent of @update="() => {}"
  onUpdate: () => {}
})

// passing single default slot
h(Foo, () => 'default slot')

// passing named slots
// notice the `null` is required to avoid
// slots object being treated as props
h(MyComponent, null, {
  default: () => 'default slot',
  foo: () => h('div', 'foo'),
  bar: () => [h('span', 'one'), h('span', 'two')]
})

另請參閱 指南 - 渲染函式 - 建立 VNodes

mergeProps()

以特殊處理某些屬性的方式合併多個屬性物件。

型別

function mergeProps(...args: object[]): object

詳細資訊
mergeProps() 支援合併多個屬性物件，並特別處理以下屬性
- class
- style
- onXxx 事件監聽器 - 同名的多個監聽器將被合併成一個數組。
如果您不需要合併行為，並希望進行簡單的覆蓋，可以使用原生的物件展開操作。

示例

import { mergeProps } from 'vue'

const one = {
  class: 'foo',
  onClick: handlerA
}

const two = {
  class: { bar: true },
  onClick: handlerB
}

const merged = mergeProps(one, two)
/**
 {
   class: 'foo bar',
   onClick: [handlerA, handlerB]
 }
 */

cloneVNode()

克隆一個虛擬節點（vnode）。

型別

function cloneVNode(vnode: VNode, extraProps?: object): VNode

詳細資訊
返回一個克隆的虛擬節點，可以可選地帶有額外的屬性以與原始節點合併。
一旦建立，虛擬節點應該被視為不可變，您不應該修改現有虛擬節點的屬性。相反，您應該使用不同的/額外的屬性克隆它。
虛擬節點具有特殊的內部屬性，因此克隆它們並不像物件展開那樣簡單。 cloneVNode() 處理大部分內部邏輯。

示例

import { h, cloneVNode } from 'vue'

const original = h('div')
const cloned = cloneVNode(original, { id: 'foo' })

isVNode()

檢查一個值是否是虛擬節點。

型別

function isVNode(value: unknown): boolean

resolveComponent()

用於手動透過名稱解析已註冊的元件。

型別

function resolveComponent(name: string): Component | string

詳細資訊
注意：如果您可以直接匯入元件，則不需要此功能。
resolveComponent() 必須在 setup() 或渲染函式內部呼叫，以便從正確的元件上下文中解析。
如果找不到元件，將發出執行時警告，並返回名稱字串。

示例

import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('ButtonCounter')

    return () => {
      return h(ButtonCounter)
    }
  }
}

import { h, resolveComponent } from 'vue'

export default {
  render() {
    const ButtonCounter = resolveComponent('ButtonCounter')
    return h(ButtonCounter)
  }
}

另請參閱 指南 - 渲染函式 - 元件

resolveDirective()

用於手動透過名稱解析已註冊的指令。

型別

function resolveDirective(name: string): Directive | undefined

詳細資訊
注意：如果您可以直接匯入指令，則不需要此功能。
resolveDirective() 必須在 setup() 或渲染函式內部呼叫，以便從正確的元件上下文中解析。
如果找不到指令，將發出執行時警告，並返回 undefined。
另請參閱 指南 - 渲染函式 - 自定義指令

withDirectives()

用於向虛擬節點新增自定義指令。

型別

function withDirectives(
  vnode: VNode,
  directives: DirectiveArguments
): VNode

// [Directive, value, argument, modifiers]
type DirectiveArguments = Array<
  | [Directive]
  | [Directive, any]
  | [Directive, any, string]
  | [Directive, any, string, DirectiveModifiers]
>

詳細資訊
使用自定義指令包裝現有的虛擬節點。第二個引數是自定義指令的陣列。每個自定義指令也以 [指令, value, argument, modifiers] 形式的陣列表示。如果不需要，可以省略陣列的尾部元素。

示例

import { h, withDirectives } from 'vue'

// a custom directive
const pin = {
  mounted() {
    /* ... */
  },
  updated() {
    /* ... */
  }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
  [pin, 200, 'top', { animate: true }]
])

另請參閱 指南 - 渲染函式 - 自定義指令

withModifiers()

用於向事件處理函式新增內建的 v-on 修飾符。

型別

function withModifiers(fn: Function, modifiers: ModifierGuardsKeys[]): Function

示例

import { h, withModifiers } from 'vue'

const vnode = h('button', {
  // equivalent of v-on:click.stop.prevent
  onClick: withModifiers(() => {
    // ...
  }, ['stop', 'prevent'])
})

另請參閱 指南 - 渲染函式 - 事件修飾符

在GitHub上編輯此頁面

渲染函式 API ​

h() ​

mergeProps() ​

cloneVNode() ​

isVNode() ​

resolveComponent() ​

resolveDirective() ​

withDirectives() ​

withModifiers() ​

渲染函式 API

h()

mergeProps()

cloneVNode()

isVNode()

resolveComponent()

resolveDirective()

withDirectives()

withModifiers()