Поэтому я использую Vue с Vuetify, и у меня есть несколько компонентов, которые довольно похожи, но достаточно различаются, чтобы оправдать их разделение.
Чтобы избежать дублирования кода, я создал базовый компонент, который онирасширить, чтобы поделиться сценарием, который они имеют общий.Но в этом сценарии все их шаблоны абсолютно одинаковы .Примерно так:
<v-card class="mb-3">
<v-card-text>
<v-form>
<v-textarea
v-model="question.text"
label="Question"
:auto-grow=true
rows="1"
required
v-if="!options.richText"
>
<template slot="append">
<v-icon
@click="toggleVariable('richText')"
v-if="!options.richText"
title="Advanced text editor"
>format_color_text</v-icon>
</template>
</v-textarea>
<tinymce v-model="question.text" v-if="options.richText"></tinymce>
<answer
v-for="(answer, answerIndex) in question.answers"
:key="answer.id"
v-on:remove-answer="removeAnswer(answerIndex)"
:options="options"
:config="question.config"
:answer-index="answerIndex"
:answer="answer"
:numAnswers="question.answers.length"
></answer>
</v-form>
</v-card-text>
<question-options
:options="options"
:config="question.config"
:questionIndex="questionIndex"
v-on:add-answer="addAnswer"
v-on:toggle-variable="toggleVariable"
></question-options>
</v-card>
Что было бы хорошим способом разрешить всем трем компонентам использовать один и тот же шаблон?
Я поиграл с идеей слотов с областями видимости , но тогда, если я правильно понимаю, весь этот шаблон должен был бы войти в родительский компонент вместе со ссылками на все переменные и функции.И тогда мне придется повторить это во всех родительских компонентах, которые хотят использовать эти дочерние компоненты.
Что я могу сделать, чтобы избежать необходимости повторять весь этот код во всех моих похожих компонентах?