My Goal
I aim to pass the Component into the designated slot.
The Inquiry
How can I effectively pass the Component into the slot for proper rendering? It works well with strings or plain HTML inputs.
Additional Query
If direct passing is not feasible, what other approach could be used to pass a component into another component following the structure below?
Parent Component
Template Code
<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 Code - Key Sections
<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,
},
<...>
Child Component
<!-- 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>
Despite consulting various resources such as documentation on named slots functionality, none of the sources offered a solution to my specific challenge.
Some of the references reviewed include:
- 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