CODEWITHSUNDEEP
vue.js
Ferus
Ferus

Reputation: 1118

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

So if I have a slot like this:

<span slot="?" slot-scope="data>...</span>

What should question mark be here if I want to use this for everything?

Upvotes: 0

Views: 948

Answers (1)

Ferrybig
Ferrybig

Reputation: 18834

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>

Upvotes: 2

Related Questions