关于vue3 h函数的使用(事件、属性、插槽)

<script lang="ts">
import { h } from 'vue'
import MyButton from './computents/myButton.vue'
export default { 
  props: ['data'],
  setup(props, { slots }) {
    // 简单使用
    return () => h('span', { prop: '组件属性' }, () => '一个span')
    // 事件 注：on加驼峰
    return () => h('span', { prop: '组件属性', onClick: () => {} }, () => '一个span')
    // 定义默认/具名插槽
    return () => h('div', [
        slots.default && slots.default(data),
        slots.slotName && slots.slotName(data)
    ])
    // 使用子组件插槽
    return () => h(
        MyButton,
        {
            type: '组件属性',
            slotName: （{ data }） => h('span', data.name)
        },
        [ h('span', () => '默认插槽') ]
    )
  }
}
</script>
<template></template>