h函数的语法
h函数用于生成虚拟节点
- 第一个参数:节点的标签名
- 第二个参数:节点的属性,通过对象的方式添加,如class,style等
- 第三个参数:节点标签内的内容
更多详细用法见链接
vue2.x中h函数(createElement)与vue3中的h函数详解
完整范例代码
test.vue
<template> <RenderVnode :vNode="node" /> </template> <script setup lang="ts"> import { h } from "vue"; import RenderVnode from "./RenderVnode"; const node = h("h1", { style: { color: "red" } }, "你好"); </script>
RenderVnode.ts(与 test.vue在同一目录下)
import { defineComponent } from 'vue' const RenderVnode = defineComponent({ props: { vNode: { type: [Object, String], required: true } }, render() { return this.vNode } }) export default RenderVnode