Vue3+TypeScript学习笔记（三十三）

首先我们回顾一下在脚本中利用createVNode和render函数创建Vue节点的方法

<template></template>

<script setup lang="ts">
import { ref, reactive, createVNode, render } from 'vue'

// 类型、配置项、内容
const div = createVNode('div', { id: 'foo' }, '小满')

// 虚拟DOM、要插入的位置
render(div, document.body)
</script>

<style scoped></style>

这种方法可以很方便地创建节点，样式可以使用tailwindcss（好像不能用普通css）。不过以下这种h函数提供了全新的方法(仍需借助tailwindcss)

<template>
    <Btn @on-click="getBtn" text="小满的帽子"> </Btn>
</template>

<script setup lang="ts">
import { ref, reactive, h } from 'vue'
type Props = {
    text: string
}

// 要定义的节点名称
const Btn = (props: Props, ctx: any) => {
    return h(
        'div',
        {
            class: [
                'rounded',
                'bg-green-500',
                'text-gray-50',
                'text-center',
                'p-1.5',
            ],
            id: ['a'],
      // 这里的onClick指的是原生事件，意为当Btn标签被点击时触发onClick的回调函数
            onClick: () => {
                ctx.emit('on-click', '开枪')
            },
        },
        props.text
    )
}
const getBtn = (str: string) => {
    console.log(str)
}
</script>

<style scoped></style>

如图，要定义的节点不再是函数的返回值，它本身就是一个函数。这个函数接收两个变量(props和ctx)，props是从模板当中获取到的数据，ctx中包含了emit、slots等vue常用的函数，h函数的参数列表和createVNode相同，都是标签类型{string}--id、类名、事件等标签属性{配置对象}---标签中展示的内容
除上述用法外，标签中也可以定义插槽，只需要在上述模板的基础上将props.text改为ctx.slots.插槽名()即可

<template>
    <Btn @on-click="getBtn" text="小满的帽子">
<!--     这里填写对应的插槽名称 -->
        <template #default>
            小满要拔剑了!
        </template>
    </Btn>
</template>

<script setup lang="ts">
import { ref, reactive, h } from 'vue'
type Props = {
    text?: string
}

// 要定义的节点名称
const Btn = (props: Props, ctx: any) => {
    return h(
        'div',
        {
            class: [
                'rounded',
                'bg-green-500',
                'text-gray-50',
                'text-center',
                'p-1.5',
            ],
            id: ['a'],
            onClick: () => {
                ctx.emit('on-click', '开枪')
            },
        },
        ctx.slots.default()
    )
}
const getBtn = (str: string) => {
    console.log(str)
}
</script>

<style scoped></style>