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&nbsp;:&nbsp;//vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth您只需要slot在孩子的选项中指定一个：h('div',&nbsp;{&nbsp;slot:&nbsp;'custom'&nbsp;},&nbsp;'My&nbsp;Content')