Components as slot content Vue3-CodePudding

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 >
    <div id="modalIndicator" >
        <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...

CodePudding user response：

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 >
    <div id="modalIndicator" >
        <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.