Vue3如何将组件作为插槽内容传入？当前写法不生效求助

你当前的问题在于父组件中未将PaymentTemplate绑定到PkDynModalCenter的content具名插槽上，导致插槽无法识别并渲染该组件。以下是几种正确的实现方式：

方式一：使用<template>包裹组件并指定插槽名 #

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

方式二：使用v-slot缩写#简化写法 #

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

方式三：直接给组件绑定插槽指令（仅适用于组件为插槽唯一内容时） #

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

额外注意事项 #

• 确保PaymentTemplate已在父组件中完成局部注册或全局注册，否则即使插槽绑定正确，组件也无法正常渲染。
• 若PkDynModalCenter的插槽有作用域参数，还需在v-slot中接收对应参数（比如v-slot:content="slotProps"），但根据你提供的组件代码，当前插槽无作用域参数，无需额外处理。

内容的提问来源于stack exchange，提问作者temp