目录
- 前言
- [一、h() 函数的基本使用方式](#一、h() 函数的基本使用方式)
- [二、h() 函数的进阶使用方式](#二、h() 函数的进阶使用方式)
前言
Vue 提供了一个 h() 函数用于创建 vnodes。
h() 是 hyperscript 的简称------意思是"能生成 HTML (超文本标记语言) 的 JavaScript"。
typescript
const vnode = h(
'div', // type
{ id: 'foo', class: 'bar' }, // props
key: '001', // key
[
/* children */
]
)
【注意】组件树中的 vnodes 必须是唯一的。
一、h() 函数的基本使用方式
typescript
import { h } from 'vue'
// 除了类型必填以外,其他的参数都是可选的
h('div')
h('div', { id: 'foo' })
// attribute 和 property 都能在 prop 中书写
// Vue 会自动将它们分配到正确的位置
h('div', { class: 'bar', innerHTML: 'hello' })
// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h('div', { '.name': 'some-name', '^width': '100' })
// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })
// 事件监听器应以 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')])
二、h() 函数的进阶使用方式
1、条件渲染
typescript
h('div', [ok.value ? h('div', 'yes') : h('span', 'no')])
2、列表渲染
typescript
h(
'ul',
// 假设'items'是一个具有数组值的 ref
items.value.map(({ id, text }) => {
return h('li', { key: id }, text)
})
)
3、事件
typescript
h(
'button',
{
onClick: (event) => {},
// 对于事件和按键修饰符,可以使用 withModifiers 函数
onDbclick: withModifiers(() => {}, ['stop'])
},
'click me'
)
4、使用插槽
typescript
import { h } from 'vue'
const vnode = h(
'SelfComponent',
// 默认插槽:
// <div><slot /></div>
// <div>{slots.default()}</div>
h('div', slots.default()),
// 具名插槽
// <div><slot name="footer" :text="message" /></div>
// <div>{slots.footer({ text: props.message })}</div>
h(
'div',
slots.footer({
text: props.message
})
)
)
【参考文章】
vue 官网之"渲染函数 & JSX"