Vue：如何使用自定义的 v-slot dom 构造组件？

Question

现在我有一个自定义组件，我使用自定义渲染函数：

<script>
export default {
  render(h) {
    return h('InnerComponent', h('div', 'My Content'))
  }
}
</script>

InnerComponent 定义如下：

<template>
  <div>
    <div>Default slot: <slot></slot></div>
    <div>Custom slot: <slot name="custom"></slot></div>
  </div>
</template>

于是h('div', 'My Content')的内容被注入到默认槽中，最终渲染如下：

<div>
  <div>Default slot: <div>My Content</div></div>
  <div>Custom slot: </div>
</div>

那么，如果我想将该内容注入自定义插槽怎么办？ (<slot name="custom"></slot>)，在渲染函数内部，就像我们在下面的模板中使用的那样？

<template>
  <InnerComponent>
    <div v-slot:custom>My Content</div>
  </InnerComponent>
</template>

<script>
export default {
}
</script>

Answer 1

相关文档：https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

您只需要在孩子的选项中指定一个slot：

h('div', { slot: 'custom' }, 'My Content')