vue3中h函数的使用

h函数是用于创建一个 vnodes ，它既可以用于创建原生元素，也可以创建组件，其渲染后的效果等同于使用模版语言来进行创建。

h函数的传参如下：

// 完整参数签名
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode

// 省略 props
function h(type: string | Component, children?: Children | Slot): VNode

第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义。第二个参数是要传递的 prop，第三个参数是子节点。

1、创建原生元素：

<script setup>
import { ref, h } from 'vue'

const message = ref('在div里面渲染的值')
const comp = h(
  'div',
  {
    style: {
      color: 'red'
    },
    onclick: ()=> {
      console.log('点击了原生元素div');
    }
  },
  message.value
)
</script>

<template>
  <component :is="comp" />
</template>

这里给 div 传的 props 里有样式 style 和事件 click ，在页面上的显示和点击了元素后效果和在模版语言中定义是一样的：

需要注意的是，我们这里的 comp 是一个 vnodes ，而 setup 函数并不是响应式的环境，所以当我们在 setup 函数中调用 h 函数来获取 vnodes 时，并没有绑定 message ！只有在 render 函数中执行才会绑定，所以我们可以定义一个h函数来返回给 comp，在渲染时，让component来帮我们调用。可以通过在 2s 后改变 message 的值来对比两种情况下页面渲染的变化：

const message = ref('在div里面渲染的值')
// 这样不会更新 message 的值
// const comp = h(
//   'div',
//   {
//     style: {
//       color: 'red'
//     },
//     onclick: ()=> {
//       console.log('点击了原生元素div');
//     }
//   },
//   message.value
// )

// 这样可以更新 message 的值
const comp = () => h(
  'div',
  {
    style: {
      color: 'red'
    },
    onclick: ()=> {
      console.log('点击了原生元素div');
    }
  },
  message.value
)

setTimeout(()=> {
  message.value = '2s后更新了在div里面渲染的值'
}, 2000)

2、创建组件

这里使用的是一个批量注册的方式导入 HelloWorld 组件，Comp 是一个全局组件

全局组件的定义如下：

// component.js

import { h } from 'vue'

const modules = import.meta.glob('../components/*.vue')

const components = {}
for(const path in modules) {
    const module = await modules[path]()
    const componentName = path.replace(/.*\/(.*)\.vue/, '$1')
    components[componentName] = module.default
}
const component = (props,{slots}) => {
    let name  =  props?.component
    return h(
        components[name], 
        { 
            msg: '通过props传的msg',
            onFoo: (value)=> {
                console.log(value);
            },
        },
        slots
    )
}

export default component

页面上导入是这样的：

容易混淆的地方是，Comp 是一个全局组件，通过传参 HelloWorld 渲染的才是 HelloWorld 组件，相当于外面套了一层，这里的 slots 其实是 Comp 组件的 slots , slots 传进了 HelloWorld 组件里，使用 HelloWolrd 组件里预留的插槽渲染的

<Comp component="HelloWorld">
    我是 Comp 组件的默认插槽
    <template #header>
      <div>
        我是 Comp 组件的 header 插槽
      </div>
    </template>
  </Comp>

HelloWorld 组件中定义的：

<template>
  <div>
    <div>{{msg}}</div>
    <div style="color: red">{{valueInProps}}</div>
    <slot></slot>
    <slot name="header" valueInSlot="我是 header 插槽里面的值">
      <div>
        我是 header 插槽里面的默认值，外部没有定义的话就是显示这个
      </div>
    </slot>
  </div>
</template>

那么 slots 里面到底是什么呢，我们直接打印一下看看：

我们可以看到 slots 其实是一个对象，键是插槽的名字，值其实就是一个渲染函数 h()，

也可以这样写：

const component = (props,{slots}) => {
    let name  =  props?.component
    console.log(slots);
    return h(
        components[name], 
        { 
            msg: '通过props传的msg',
            onFoo: (value)=> {
                console.log(value);
            },
        },
        slots.default()
    )
}

使用作用域插槽的话：

const component = (props,{slots}) => {
    let name  =  props?.component
    return h(
        components[name], 
        { 
            msg: '通过props传的msg',
            onFoo: (value)=> {
                console.log(value);
            },
        },
        slots.default('我是作用域插槽传的值')
    )
}

<Comp component="HelloWorld">
    <template #default="scope">
      <div>
        {{scope}}
      </div>
    </template>
  </Comp>

如果我们不想帮 Comp 组件渲染的话，也可以自己来写：

const component = (props,{slots}) => {
    let name  =  props?.component
    console.log(slots);
    return h(
        components[name], 
        { 
            msg: '通过props传的msg',
            onFoo: (value)=> {
                console.log(value);
            },
        },
        {
            default: ()=> h('div', '我是 HelloWorld 组件的默认插槽里面的值'),
            header: ()=> h('div', '我是 HelloWorld 组件的 header 插槽里面的值'),
        }
    )
}

如果我们想渲染预留插槽里面的值（即作用域插槽），可以这样传：

<slot name="header" valueInSlot="我是 header 插槽里面的值">
      <div>
        我是 header 插槽里面的默认值，外部没有定义的话就是显示这个
      </div>
</slot>

const component = (props,{slots}) => {
    let name  =  props?.component
    console.log(slots);
    return h(
        components[name], 
        { 
            msg: '通过props传的msg',
            onFoo: (value)=> {
                console.log(value);
            },
        },
        {
            default: ()=> h('div', '我是 HelloWorld 组件的默认插槽里面的值'),
            header: ({valueInSlot})=> h('div', '我是 HelloWorld 组件的 header 插槽里面的值,后面是预留插槽的值传递：'+valueInSlot),
        }
    )
}

页面上的显示效果：