[Vue] h()

h()

가상 돔 노드를 만드는 함수이다.

 

타입

// 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 }

Types are simplified for readability

 

Details

첫번째 아규먼트는 string ('div'같은 native element) 나 뷰 컴포넌트가 될 수 있다. 두 번째 아규먼트는 넘겨지게될 props이며, 세 번째는 children이다.

 

컴포넌트 vnode를 만들 때, children은 slot 함수로서 넘겨지게 된다. 하나의 slot 함수는 오직 default slot만 사용할 때 넘겨질 수 있는 반면, 여러개의 slots들은 slot 함수의 객체로서 넘겨져야만 한다.

 

편리함을 위해, props 아규먼트는 children이 slots가 아닐 때는 생략될 수 있다.

 

Example

native element 예제:

import { h } from 'vue'

// 타입을 제외한 모든 아규먼트들은 생략가능하다.
h('div')
h('div', { id: 'foo' })

// 애트리뷰트와 프로퍼티들 모두 props로 사용할 수 있는데,
// 뷰는 자동적으로 올바르게 할당시킨다.
h('div', {class: 'bar', innerHTML: 'hello' })

// class와 style은 템플릿에서 사용할 때처럼,
// 객체/ 배열을 지원한다.
h('div', {class: [foo, {bar}], style: { color: 'ref' } })

// 이벤트 리스너들은 'onXxx' 형식으로 넘긴다.
h('div', { onClick: () => {} })

// children으로 문자열도 가능하다.
h('div', { id: 'foo' }, 'hello')

// props가 없을때는 생략할 수 있다.
h('div', 'hello')
h('div', [h('span', 'hello')])

// children 배열은 vnodes와 문자열을 섞어서 사용할 수 있다.
h('div', ['hello', h('span', 'hello')])

컴포넌트 예제:

import Foo from './Foo.vue'

// props 넘기기
h(Foo, {
  // some-prop="hello" 와 동일
  someProp: 'hello',
  // @update="() => {}" 와 동일
  onUpdate: () => {}
})

// single default slot 을 넘길 때
h(Foo, () => 'default slot')

// named slot을 넘길 때
// slots 오브젝트가 props로 간주되는 것을 피하기 위해
// 두 번째 아규먼트로 null이 필요하다.
h(MyComponent, null, {
  default: () => 'default slot',
  foo: () => h('div', 'foo'),
  bar: () => [h('span', 'one'), h('span', 'two')]
})