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

Question

我想要达到的目标

我正在尝试将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>

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

检查资源的示例：

• https://www.smashingmagazine.com/2019/07/using-slots-vue-js/
• 如何将命名插槽插入父组件
• https://medium.com/js-dojo/vue-named-slot-shorthand-8a920358e861
• https://v3.vuejs.org/guide/component-slots.html
• https://medium.com/@norton.seanm/vue-js-slots-8a274c80450e

Answer 1

我找到了解决方案……这非常……可怕。 Vue不会检查数组是否为空，在v-for它会尝试循环然后抛出错误。

就个人而言，来自其他语言/框架 - 这不应该发生。

但是，这是解决方案：

<!-- Template -->
<template>

  <card-with-title card-title="Title">
    <template #card-body>
      <div v-if="[lastProcessedEmails.length]">

        <row-fontawesome-icon-with-text v-for="mailDto in lastProcessedEmails">
          <template #icon>
            <i class="font-weight-bold">
              <i v-if="mailDto.status === mailStatusSent"         :class="fontawesomeIconClassesSent"></i>
              <i v-else-if="mailDto.status === mailStatusPending" :class="fontawesomeIconClassesPending"></i>
              <i v-else                                             :class="fontawesomeIconClassesError"></i>
            </i>
          </template>

          <template #title>
            {{ mailDto.subject }}
          </template>

          <template #title-context>
            {{ mailDto.created }}
          </template>
        </row-fontawesome-icon-with-text>

      </div>
    </template>
  </card-with-title>

</template>

整个问题是：

  data(){
    return {
      lastProcessedEmails: [],
    }
  },

lastProcessedEmails通过 Axios 调用更新。