Vue.js 3 - 将组件插入插槽

编程问答 2022-06-01

问题描述

我想要达到的目标

我正在尝试将 Component 传递到 slot。

问题/信息

我如何将 Component 传递到 slot 以便它被呈现？只要我传递字符串/纯 html，这就可以正常工作。

附加问题

如果这是不可能的 - 那么我如何将组件传递给具有如下结构的其他组件？

父级

模板代码

<template>
  <card-with-title card-title="Title">
    <template #card-body>
      <row-fontawesome-icon-with-text v-for="mailDto in lastProcessedEmails"/>
    </template>
  </card-with-title>
</template>

脚本代码 - 重要部分

<script>
import SymfonyRoutes                     from '../../../../../core/symfony/SymfonyRoutes';
import GetLastProcessedEmailsResponseDto from '../../../../../core/dto/api/internal/GetLastProcessedEmailsResponseDto';
import MailDto                           from '../../../../../core/dto/modules/mailing/MailDto';

import CardWithTitleComponent              from '../../../../base-layout/components/cards/card-with-title';
import RowFontawesomeIconWithTextComponent from '../../../../other/row-fontawesome-icon-with-text';

export default {
  components: {
    'card-with-title'                : CardWithTitleComponent,'row-fontawesome-icon-with-text' : RowFontawesomeIconWithTextComponent,},<...>

儿童

<!-- Template -->
<template>
  <div class="col-12 col-lg-4 mb-4">
    <div class="card border-light shadow-sm">
      <div class="card-header border-bottom border-light">
        <h2 class="h5 mb-0">{{ cardTitle }}</h2>
      </div>
      <div class="card-body">
        <slot name="card-body"></slot>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<!-- Script -->
<script>
export default {
  props: [
      "cardBody","cardStyle","cardTitle"
  ],}
</script>

我对这个问题进行了研究，我在文档中看到了命名插槽的工作方式，但没有帖子/博客条目回答/解决我的问题。

已检查资源的示例：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptslotvue.jsvuejs3