vue3渲染函数h的简单使用

基本用法

创建 Vnodes
Vue 提供了一个 h() 函数用于创建 vnodes：

import { h } from 'vue'const vnode = h('div', // type{ id: 'foo', class: 'bar' }, // props[/* children */]
)

更多用法

详情查看官方文档

在SFC中定义局部组件使用

h函数返回的是 Vnodes，无法直接在template使用，需要用一个组件render接收

示例

vue组件是一个对象，在setup中定义局部组件，基本等于定义一个对象，按照vue组件文件对象的格式来定义。

<template><div><div>count: {{ count }}</div><TextComp msg="hello"></TextComp></div>
</template><script setup lang="ts">
import { ref, h } from 'vue'const count = ref(0)
const TextComp = {props: ['msg'],setup(props, context) {return () => {return h('div', {class: 'container',onClick: () => {console.log('props', props)}}, [props.msg,h('button', {onClick: () => {count.value++}}, 'increase')])}}
}</script><style scoped></style>