如何解决Vue.js 3 - 将组件插入插槽
我想要达到的目标
我正在尝试将 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/
- How to insert named slots into parent components
- 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。