How to properly move helper components into children components in Vuetify?-CodePudding

I have a component with a v-card in it which looks like this:

<!-- CurrentFile.vue -->
<v-card color="primary">
    <v-card-title >Flashing title</v-card-title>
    <v-card-subtitle>
        <span >A fancy subtitle</span>
    </v-card-subtitle>
    <v-card-text >
        ...
    </v-card-text>
</v-card>

While refactoring, I wanted to create a new component that would encapsulate both v-card-title and v-card-subtitle helper components, since they use the same text color.

<!-- CurrentFile.vue -->
<v-card color="primary">
    <my-new-header textColor="secondary--text" title="Flashing title" subtitle="A fancy subtitle"/>
    <v-card-text >
        ...
    </v-card-text>
</v-card>

I went on to create this child component

<!-- MyNewHeader.vue -->
<template>
    <span>
        <v-card-title  :>{{ title }}</v-card-title>
        <v-card-subtitle>
            <span  :>{{ subtitle }}</span>
        </v-card-subtitle>
    </span>
</template>

Issue

With the inclusion of a <span> tag, the use of v-card-title and v-card-subtitle components is almost irrelevant. It seems to me that both containers lose their properties (margins and paddings).

Of course, it's logical, since it adds an undesired level of hierarchy. Once the child component is injected, the structure ends up looking like this:

<v-card>
    <span>
        <v-card-title/>
        <v-card-subtitle>
            <span/>
        </v-card-subtitle>
    </span>
    <v-card-text/>
</v-card>

I would very much remove that <span> tag to avoid all these problems, but there must only be one element at the template root.

Is there another way of doing what I want to do that I'm missing? Or maybe is it overkill to want that many sub-components?

CodePudding user response：

There are 3 possible solutions for your issue:

Using fragments - https://github.com/privatenumber/vue-frag
Using render function instead of a component template - https://v2.vuejs.org/v2/guide/render-function.html
Using CSS display: contents to effectively replace the wrapper with its content - https://developer.mozilla.org/en-US/docs/Web/CSS/display-box