作为插槽内容的组件Vue3

pxyaymoc  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(214)

我想知道如何添加组件作为插槽内容。而不是这样做:

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

我想传递一个组件。
PkDynModalCenter( Package 动态模式中心):

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

父项:

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

但是没有显示出来。那里的文档很模糊...

ccrfmcuu

ccrfmcuu1#

查看已命名插槽的文档:https://vuejs.org/guide/components/slots.html
您只能将父代码与默认插槽一起使用,因此您的PkDynModalCenter应如下所示:

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

对于模态的当前代码,只能像在第一个代码片段中那样调用它。

相关问题