0

I begin to think, that I approach this problem from the wrong angle.

So the original problem is this: I have a component which renders a form and handles all API interaction regarding this form's input and stuff. It handles the whole API object, so there are multiple input fields at once. But the component does not know the parent style or styling method. It may be used in a table or flexbox or something else. So I want it to be style agnostic.

I came up with this: It takes the style as slot content.

Component (I called it InverseSlot)

<template>
    Start
    <slot :sub="SaveButton" :subEvents="{ click }" />
    End
</template>

<script setup>
import SaveButton from "@/components/UI/buttons/SaveButton.vue";

function click() {
    console.log("foobar");
}
</script>

Usage

<InverseSlot v-slot="{ sub, subEvents }">
    Middle1
    <Component :is="sub" v-on="subEvents" />
    Middle2
</InverseSlot>

Result

Start Middle1 [SaveButton] Middle2 End

Looking good. For the final form multiple of these slots will be instantiated in the component with different props and event bindings and every time the wrapping from the slot content is being applied.

So my question is: Is this a good way of delegating style? Or am I missing something? Does VueJS have some better way of doing this?

kissu
  • 40,416
  • 14
  • 65
  • 133
Martin B.
  • 1,567
  • 14
  • 26
  • You can pass a string for some classes down from a parent to it's child. You can also use `deep` selector to send the style to the child. Otherwise, you can style it directly from the parent considering that the child is a single piece by itself. You can also use slots and apply specific styling to those. For the rest, inline style can have more prio. Those are all the approach to handle style in both ways to my knowledge (using Tailwind). You may have some more of course but the idea would be similar. Maybe BEM principle for the scoping can be of some help. – kissu Nov 12 '22 at 14:06

0 Answers0