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')