vue中的h函数的分析及使用

h函数的作用，创建虚拟 DOM 节点 (vnode)。

参数分析，第一个参数是原生元素字符串例如'div','span','input'等，第二个参数是一个对象里面可以存放props传参，style样式，以及class类名等(如果不需要可以传Null,或者不写)，第三个参数是子节点数组也可以是第一个元素对应的内容(字符串)。

下面将距离说明h函数的每种使用情况。

1、h函数渲染带style标签

const El = {
  render() {
    return h("div", { style: "color:red;" }, "h函数渲染带style标签，字体红色");
  },
};

2、h函数渲染带class样式

const El1 = {
  render() {
    h("div", { class: "yellow" }, "h函数渲染带class样式，字体黄色");
  },
};

3、h函数渲染多个元素

const El2 = {
  render() {
    return h(
      "div",
      {
        style: "display:flex;flex-direction:column;",
      },
      [
        h("span", { style: "color:blue;" }, "练习时长两年半（蓝色）"),
        h("span", { style: "color:green;" }, "练习时长两年半（绿色）"),
      ]
    );
  },
};

4、h函数渲染组件prop传参

const ElChild = {
  render() {
    return h(Child, { text: "props的传参", style: "color:blue;" });
  },
};

child组件

<template>
    <div>子组件内容：{{ text ?? "-" }}</div>
  </template>
  <script setup lang="ts">
  const props = defineProps<{ text: string }>();
  </script>

5、h函数渲染组件插槽内容

const ElSlotChild = {
  render() {
    return h(
      SlotChild,
      null, //这里一般传null,避免影响子组件的样式 也可以传style样式等或props传参
      {
        default: () => h("div", { style: "color:red;" }, "默认插槽内容"),
        content: () => h("div", { style: "color:green;" }, "content插槽内容"),
      }
    );
  },
};

插槽组件

<template>
  <div>
    <div>插槽组件测试</div>
    <!-- 默认 -->
    <div><slot></slot></div>
    <div><slot name="content"></slot></div>
  </div>
</template>
<script setup lang="ts"></script>

6、h函数渲染点击事件

const ElClickChild = {
  render() {
    return h(
      "div",
      {
        onClick: () => {
          window.alert("别点啦！！！！");
        },
      },
      "点击事件"
    );
  },
};

7、elementPlust组件使用h函数渲染vnode示例-以及接受emits事件

const openMessage = () => {
  ElMessageBox({
    title: '自定义组件',
    message: () => 
      h(ElSwitch, {
        modelValue: checked.value,
        'onChange': (val: boolean | string | number) => {
          console.log("🚀 ~ openMessage ~ val:", val);
          checked.value = val
        },
      }),
  })
};

在组件库中使用h函数需要注意 返回的值的类型是否是vnode节点，才可以使用h函数

8、上述代码使用代码示例，以及实现示例

<template>
  <div class="mybox">
    <div>
      <div class="title">1、渲染带style标签</div>
      <El />
      <div class="title">2、h函数渲染带class样式</div>
      <El1 />
      <MyComponent />
      <div class="title">3、h函数渲染多个元素</div>
      <El2 />
      <div class="title">4、h函数渲染组件prop传参</div>
      <ElChild />
      <div class="title">5、h函数渲染组件插槽内容</div>
      <ElSlotChild />
      <div class="title">6、h函数渲染组件点击事件</div>
      <ElClickChild />
      <div class="title">7、element组件使用h函数渲染vnode示例</div>
      <ElButton type="primary" @click="openMessage" >打开一个messagebox，渲染select组件</ElButton>
    </div>
  </div>
</template>