Vue3使用h函数创建子组件（涉及到$emit，props的传递以及多个具名插槽的使用）

h 函数是什么
h 函数本质就是 createElement() 的简写，作用是根据配置创建对应的虚拟节点，在vue 中占有极其重要的地位！！！

h 函数的配置
参数
接收三个参数：type，props 和 children

type
类型：String | Object | Function
详细：HTML 标签名、组件、异步组件或函数式组件 （注意：Vue3 不支持组件名用字符串表示了，必须直接使用组件名）

例如：
import MySon from './son.vue'

h('div', {}, [
　　h(MySon, {props: {name: 'hhh'}}) // MySon 不可写成 'MySon'
])

props

类型：Object
{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
　　id: 'foo'
},
// 组件 props
props: {
　　myProp: 'bar'
},
// DOM 属性
domProps: {
　　innerHTML: 'baz'
},
// 事件监听器基于 `on`
// 所以不再支持如 `v-on:keyup.enter` 修饰器
// 需要手动匹配 keyCode。
on: {
　　click: this.clickHandler
},
// 仅对于组件，用于监听原生事件，而不是组件内部使用
// `vm.$emit` 触发的事件。
nativeOn: {
　　click: this.nativeClickHandler
},
// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
// 赋值，因为 Vue 已经自动为你进行了同步。
directives: [
{
　　name: 'my-custom-directive',
　　value: '2',
　　expression: '1 + 1',
　　arg: 'foo',
　　modifiers: {
　　　　bar: true
　　}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
　　default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}

children
类型：String | Object | Array

String

h('div', {}, 'Some text comes first.')

生成的虚拟节点：

<div>Some text comes first.</div>

 

Array

h('div', {}, [
  'Some text comes first.',
  h('h1', 'A headline'),
  h(MyComponent, {
   props: {
    name: 'hhh'
   }
  })
])

 

生成的虚拟节点：

<div>
    Some text comes first.
    <h1>A headline</h1>
    <MyComponent name="hhh" />
</div>

Object
这个挺实用的，特别是需要传入多个具名插槽的时候！！！

子组件：
<template>
    <div>
        你好，我是子组件，下面是两个具名插槽
        <template #content />
        <template #contentTips />
    </div>
</template>



父组件：
const props = {
    name: 'aaa',
    age: 18
}
const slots = {}
['content', 'contentTips'].forEach(name => slots[name] = h('div', {key: name}, name));
h(MySon, {...props}, slots);

关于 Vue3 中 h 函数如何接收子组件$emit发送的事件

这个问题困扰了我很久。

以前 vue2 的写法：

子组件 MySon ：
<template>
    <div>
        <button @click.stop="$emit('start', 'gogogo!!!')"/>
    </div>
</template>



父组件的 h 函数：
import MySon from './son.vue'

h(MySon, {
    //子组件 $emit 传递函数
    start(data) {
        console.log(data);
    },
})

 

如今 vue3 的写法（绑定的事件名需要加多一个on前缀）：

子组件：
<template>
    <div>
        <button @click.stop="$emit('start', 'gogogo!!!')"/>
    </div>
</template>



父组件的 h 函数：
h(TableActionButtons, {
    //子组件 $emit 传递函数！！！！
    onStart(data) {
        console.log(data);
    },
})