CODEWITHSUNDEEP
vue.js
temp
temp

Reputation: 571

Components as slot content Vue3

I wonder how to add components as slot content. Instead of doing it like:

<template v-slot:content>CONTENT HERE</template>

I'd like to pass a component.

PkDynModalCenter:

<div class="...">
    <div id="modalIndicator" class="...">
        <slot name="content"></slot>
    </div>
</div>

Parent:

<PkDynModalCenter v-if="togglePayment" @closeModal="togglePayment = false">
        <PaymentTemplate :info="voucherInfo" name="content"></PaymentTemplate>
</PkDynModalCenter>

But it's not displayed. Docs are very vague there...

Upvotes: 0

Views: 1084

Answers (1)

fusion
fusion

Reputation: 457

Have a look at the docs for named slots: https://vuejs.org/guide/components/slots.html

You can only use your parent code with the default slot, so your PkDynModalCenter should look like this:

<div class="...">
    <div id="modalIndicator" class="...">
        <slot></slot> <!-- no name → default slot -->
    </div>
</div>

With your current code for the modal, you can only call it like you did in your first code snippet.

Upvotes: 1

Related Questions