vue3使用render渲染demo

vue3中提供了一个h函数用来渲染demo
首先引入

import { h, Ref, ref } from "vue";

定义函数渲染 h函数存在三个参数第一个为标签名称，第二个为对象及标签上的一些基本属性，第三个为标签内容

function renderContent(h, { node, data, store }) {
    return h("div", { class: "custom-tree-node" },'渲染的div demo')
    }

如果说div标签下存在子节点（标签）

function renderContent(h, { node, data, store }) {
    return h("div", { class: "custom-tree-node" },h('span',null,'子节点'))
    }

若是存在并层子节点则h函数第三层为数组

function renderContent(h, { node, data, store }) {
    return h("div", { class: "custom-tree-node" },[h('span',null,'子节点'),h('span',null,'子节点')])
  }

使用elementPlus组件或是自定义组件第一个参数为组件名称无需带引号，以elementPlus的button为例
首先需要引入该组件

import { ElButton, ElForm } from "element-plus";

第二步使用

function renderButton() {
    return h(
        ElButton,
        { type: "primary", size: "small" },
        "我是render生成的按钮"
    );
}

插槽渲染以elementPlus中的ElTooltip为例子，改组件存在一个content提示插槽（悬浮内容出现的提示），还存在一个匿名插槽渲染为

function renderContent(h, { node, data, store }) {
  h(
            ElTooltip,
            { placement: "right" },
            {
            //匿名插槽内容
              default() {
                    return data.name;
                },
            //具名插槽
              content(){
              return h('span',null,'组件提示内容')
              }
     )
}