Совместное использование шаблонов между компонентами в Vue - PullRequest
0 голосов
/ 17 ноября 2018

Поэтому я использую 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>

Что было бы хорошим способом разрешить всем трем компонентам использовать один и тот же шаблон?

Я поиграл с идеей слотов с областями видимости , но тогда, если я правильно понимаю, весь этот шаблон должен был бы войти в родительский компонент вместе со ссылками на все переменные и функции.И тогда мне придется повторить это во всех родительских компонентах, которые хотят использовать эти дочерние компоненты.

Что я могу сделать, чтобы избежать необходимости повторять весь этот код во всех моих похожих компонентах?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...