Templates 在Vue中跨组件共享模板

因此，我将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>

格式化\u颜色\u文本

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

我曾尝试过作用域插槽的想法，但是，如果我理解正确的话，整个模板必须与所有变量和函数的引用一起放在父组件中。然后我必须在所有想要使用这些子组件的父组件中重复这一点

---

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

不同组件中的哪些部分不同？您需要从父组件传递什么？每个组件都有一些不同的方法和设置。差异在每个组件的

部分。我从家长那里传递的只是

问题

和

问题索引

道具。