vue3:一文理解h函数的使用

目录

[第一章 前言](#第一章 前言)

[第二章 h函数的使用](#第二章 h函数的使用)

[2.1 h函数语法](#2.1 h函数语法)

[2.2 原生标签渲染](#2.2 原生标签渲染)

[2.3 组件渲染](#2.3 组件渲染)

[2.4 渲染多个标签/组件](#2.4 渲染多个标签/组件)

[2.5 slot插槽渲染](#2.5 slot插槽渲染)

[2.6 例子](#2.6 例子)

---

第一章 前言

以下是官方文档下对h函数的一些说明与使用：

https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
渲染函数 API | Vue.js

在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。

小编在该篇文章中主要说明一下h函数使用的场景和如何使用！

第二章 h函数的使用

2.1 h函数语法

• 1.type: 第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件
• 2.props: 要传的参数，可以理解成<div class="test" id="test" @click="handleClick" />标签上所有的属性都可以写在props里面，但是如果是事件监听器需要以 onXxx 的形式书写
• 3.children: 子节点,可以是字符串，也可以是数组包含多个节点，也可以是对象针对于组件的插槽
• 注意： h函数必须只有一个根节点，如果需要一次性渲染多个组件，需要在children中实现

import { h } from 'vue'

// 完整参数
/*
    1.type: 第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件
    2.props: 要传的参数，可以理解成<div class="test" id="test" @click="handleClick" />标签上所有的属性都可以写在props里面，但是如果是事件监听器需要以 onXxx 的形式书写
    3.children: 子节点,可以是字符串，也可以是数组包含多个节点，也可以是对象针对于组件的插槽
*/
const VNod = h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
)

2.2 原生标签渲染

import { h } from 'vue'

// const vnode1 = h(
//     'div', // type
//     { id: 'foo', class: 'bar' }, // props
//     [] || '' // children
// )


const message = ref('这是一个h函数渲染的div')
const vnode2 = h(
  'div',
  {
    class: 'div-test',
    style: {
      color: 'red'
    },
    onclick: ()=> {
      console.log('点击输出');
    }
  },
  message.value
)

const vnode3 = h('div')
......

2.3 组件渲染

// DownOutlined是antd的图标组件
h(DownOutlined, { style: { 'font-size': '12px' } })

2.4 渲染多个标签/组件

// h函数必须只有一个根节点，如果需要一次性渲染多个组件，需要在children中实现
h(
  'div',
  {
    class: 'w-full gap-x-3 flex items-center justify-start'
  },
  [
    h('span', null)
    h('span', null, record.seqNumber)
  ]
)

2.5 slot插槽渲染

// 这是antd的Tooltip, default为默认插槽
h(Tooltip, { title: str }, { default: () => showStr })
// 自定义组件HelloWorld，default为默认插槽，header为具名插槽
h(
    HelloWorld, 
    { 
        msg: message.value,
        onClick: (value)=> {
            console.log(value);
        },
    },
    {
        default: ()=> h('div', '我是 HelloWorld 组件的默认插槽里面的值'),
        header: ()=> h('div', '我是 HelloWorld 组件的 header 插槽里面的值'),
    }
)

2.6 例子

以下只是小编在实战中使用的一段代码：

// 利用一段三目运算活用
// 小编这里之所以props传null是因为不传会报错，但是官网说明是可选的，具体看大家敲代码时的具体情况了
return !isSub
  ? h(
      'div',
      {
        class: 'w-full gap-x-3 flex items-center justify-start'
      },
      [
        record.childList.length
          ? expandedRowsSet.value.has(record.id)
            ? h(CaretDownOutlined, {
                onClick: () => removeExpanedRow(record.id)
              })
            : h(CaretRightOutlined, {
                onClick: () => addExpanedRow(record.id)
              })
          : h('span', null),
        h('span', null, record.seqNumber)
      ]
    )
  : h('span', null)