Vue: how to construct a component with a custom v-slot dom?

0
votes

Now I have a custom Component, and I use a custom render function:

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

and the InnerComponent is defined as below:

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

So the content h('div', 'My Content') was injected into the default slot, and finally rendered as below:

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

So what if I want to inject that content into the custom slot? (<slot name="custom"></slot>), inside the render function, like we use as in the below template?

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

<script>
export default {
}
</script>
1
javascripthtmlvuejs2vue-component

1 Answers

1
votes

Relevant documentation: https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

You just need to specify a slot in the child's options:

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