Sorry, here’s some sample pseudo-code. Hopefully the formatting isn’t too messed up.
The gist of this is that I am wrapping several short forms with varying content (some text fields, some fieldsets, etc.) within an accordion component. The form content varies widely, and I use a combo of slots and templates within the one type of Accordion component. The component file contains 1) for unique forms, a combination of named/scoped slots to call larger blade files that contain the necessary form content, sometimes passing data and functions; and 2) for more reusable form content, templates that contain the entire form structure; these are used by much shorter and simpler blade files.
My question is whether this is a reasonable way to reuse this component, or is it an abuse of slots and template tags, and there are much better ways to accomplish this.
// Accordion component
<template>
// Accordion stuff
//then several named slots based on prop values
// this one is used in a blade file that includes an entire form structure for two fields
<template v-if="type === 'shell' && field === 'status'">
<slot name="shell-status-body"></slot>
</template>
// this is used in a similar way, but also passes data and a function
<template v-if="type === 'shell' && field === 'sites'">
<slot
name="shell-site-body"
:field="field"
:v="v$"
:open="open"
:in-error-state="this.inErrorState"
></slot>
</template>
<template v-if="type === 'text'">
// entire form structure for single text fields goes here
</template>
<template v-else-if="type === 'fieldset'">
// contains full form structure for a fieldset of checkboxes
</template>
</template>
// example blade file for text field
<wi-accordion
field="project_name"
type="text"
csrf-token="{{ csrf_token()}}"
group="1"
@if (isset($is_review) && $is_review)
:open-on-load="true"
@endif
>
<template v-slot:fieldhint="{field, v}">
@{{ v.form[field].maxLength.$message }}.
</template>
<template v-slot:input="{field, v}">
<input
type="text"
:id="`${field}_input`"
:name="`${field}_input`"
:ref="`${field}_input`"
class="input project-edit-input"
maxlength="150"
required
v-model="formStore.form.project_name"
:aria-describedby="describe(field, v)"
:aria-invalid="v.$error"
>
</template>
</wi-accordion>
// blade files for “shell” types contain entire form structure
