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),
}
)
}页面上的显示效果：
还有两个比较好理解的点，这里也补充一下：
在组件中传值，我们知道是用 props 来进行传递，所以在子组件中也是用 defineProps 来 接收值，而子组件想要传值给父组件的话，注意如果是传 foo 函数，则要用 onFoo 接受，例子如下：
