开发者社区云计算文章正文

vue3 中 h 函数的使用

2024-07-04 8

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue3 中 h 函数的使用

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