[Vuejs]-How do I use the same slot-element for all elements?

by

2👍

✅

This is not supported by the current state of Vue, nor is this supported when trying to hack this feature in using the JavaScript Proxy class, this is because the internal design of Vue first collects all children and maps them to an object, before passing this to the next component.

You can work around this by specifying your slot contents multiple times, like:

<!-- inside parent -->
<my-child>
    <p slot="head">Hello World</p>
    <p slot="body">Hello World</p>
</my-child>

Or modifying the child to accept a base slot to use if a slot is not passed in

<!-- inside child -->
<div>
    <slot name="head">
        <slot name="base/>
    </slot>
    <slot name="body">
        <slot name="base/>
    </slot>
</div>
👤Ferrybig

Leave a comment