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