如何使用渲染函数 h 来实现下面的模板？

[evemike]

< template >
  < MyComponent name="testRenderSlot">
    < div > default slot < /div >
    < Foo v-slot:foo id="mc-foo" > foo slot < /Foo >
    < Bar v-slot:bar id="mc-bar" > bar slot < /Bar >
  < /MyComponent >
< /template >

// 备注
我在官网并没有找到答案，只能来这里提问了。目前我采用的实现方法是用 createVNode

[liulinboyi]

可以在文档这里找到，如何使用h函数：
https://cn.vuejs.org/guide/extras/render-function.html

关于上面这个模板写成h函数，下面有个例子：
Playground Demo

<script>
import { h } from 'vue'
import MyComponent from './MyComponent.vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export default {
  render() {
    return h(
      MyComponent,
      { name: 'testRenderSlot' },
      {
        default: () => h('div', 'default slot'),
        foo: () => h(Foo, { id: 'foo' }, () => 'foo slot'),
        bar: () => h(Bar, { id: 'bar' }, () => 'bar slot')
      }
    )
  }
}
</script>

既然手写render函数了，极力推荐jsx或者tsx写模板，比用h函数方便许多😉。

[liulinboyi]

与 组件相关的 h 声明就下面几个： export declare function h(type: Component, children?: RawChildren): VNode; export declare function h(type: Component, props: null, children?: RawChildren | RawSlots): VNode; export declare function h(type: DefineComponent, children?: RawChildren): VNode; export declare function h< P >(type: DefineComponent< P >, props?: (RawProps & P) | ({} extends P ? null : never), children?: RawChildren | RawSlots): VNode;

最后一个声明不太清楚对应的泛型应该传什么类型

我对TypeScript的熟悉程度也不太够，根据我所知，目前能回答道上面这个程度，如果还有问题，可以提供一个最小复现项目仓库，根据复现例子来解决问题。

[evemike]

虽然 ts 中没有提供对应的函数声明，但是用 // @ts-ignore 忽略类型检查之后居然也没报错！:sweat_smile:

[evemike]

// 注意，需要使用 null 来避免插槽对象被当作是 prop
h(MyComponent, null, {
default: () => 'default slot',
foo: () => h('div', 'foo'),
bar: () => [h('span', 'one'), h('span', 'two')]
})

官网这个注释真的是无法理解，插槽对象是第三个参数，为什么会被当作是 prop !!!

[rudyxu1102]

与 组件相关的 h 声明就下面几个： export declare function h(type: Component, children?: RawChildren): VNode; export declare function h(type: Component, props: null, children?: RawChildren | RawSlots): VNode; export declare function h(type: DefineComponent, children?: RawChildren): VNode; export declare function h< P >(type: DefineComponent< P >, props?: (RawProps & P) | ({} extends P ? null : never), children?: RawChildren | RawSlots): VNode;

最后一个声明不太清楚对应的泛型应该传什么类型

这里的泛型是不用传的，主要是为了保持第一个参数和第二个参数的prop类型一致。

[rudyxu1102]

// 注意，需要使用 null 来避免插槽对象被当作是 prop
h(MyComponent, null, {
default: () => 'default slot',
foo: () => h('div', 'foo'),
bar: () => [h('span', 'one'), h('span', 'two')]
})

官网这个注释真的是无法理解，插槽对象是第三个参数，为什么会被当作是 prop !!!

我理解这里的意思是第二个参数和第三个参数没法区分，无法使用一个参数来区分prop和slot，所以需要两个参数。

[bbcvc]

link #6989 #6992