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>