javascript - vue 中的通用组件

Question

我在 Vue.js 中做一个测验，测验问题可以有不同的类型:

• 选择一个
• 多选
• 选择图片
• 匹配

我的问题是问题的类型是混合的(例如，你可以在测验中使用任何一种)因此是不同的组成部分(<x-select-one-question>、<x-select-multiple-question>、<x-select-image-question>、<x-match> 等)所以我可以'只需将一个组件放入测验即可。

我应该如何并且应该为此制作一个通用组件？也许是这样的？

<template>
  <div>
    <x-question 
      v-for="(question, index) in questions" 
      :key="index" 
      type="question.type"></x-question>
  </div>
</template>

Answer 1

您可以使用“组件”类型，然后在运行时使用属性“is”设置相关组件，如下所示:

<component :is="componentToRender(type)

在函数中，您将检查要返回的女巫组件，例如:

componentToRender(type){
 case 'quiz1': return 'QuizOneComponent';
// continue like this
}