Vue：如何构建具有自定义v插槽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')