在Vue中跨组件共享模板

Question

所以我将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>

什么是允许所有三个组件共享同一模板的好方法？

我玩弄了作用域插槽的想法，但是，如果我正确理解，则整个模板将必须与所有变量和函数的引用一起放在父组件中。然后，我必须在要使用这些子组件的所有父组件中重复此操作。

如何避免在所有相似组件中重复所有这些代码？