h 函数的原理就是 createVNode。可以使用 h 函数封装一些小组件。

<template><table border><tr><th>name</th><th>age</th><th>操作</th></tr><tr v-for="item in list" :key="item.age"><td>{{ item.name }}</td><td>{{ item.age }}</td><td><Btn type="success">编辑</Btn><Btn type="error">删除</Btn></td></tr></table>
</template><script setup lang="ts">
import {reactive, h} from "vue";const list = reactive([{name: 111, age: 12},{name: 333, age: 23},{name: 444, age: 44}
])interface Props {type: 'success' | 'error'
}const Btn = (props: Props, ctx: any) => {// 第一个参数是创建的结点，第二个属性是结点的属性，第三个结点是结点的内容return h('button', {style: {color: props.type === 'success' ? 'green' : 'red'},onClick: () => {// ctx.emit('click',222)if (props.type === 'success') {console.log('编辑')} else {console.log('删除')}}}, ctx.slots.default())
}
</script><style scoped lang="less"></style>