Question

我正在Vue.js中进行测验，测验问题可以是不同的类型：

选择一个
选择多个
选择图像
匹配

我的问题是问题的类型混合（例如，您可以在测验中包含任何问题），因此是不同的组成部分（<x-select-one-question>，<x-select-multiple-question>，<x-select-image-question>，{{ 1}}等），所以我不能简单地将一个组件放入测验中。

如何并且应该为此创建通用组件？也许是这样的吗？

<x-match>

Answer 1

您可以使用component作为动态组件，并通过参数进行设置：

<component :is="componentToRender(type)

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

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

Answer 2

您的组件可能就是这样

<template>
<select v-if="type == 'select'">
  <option v-for="item in items" value="item.value">{{ item.text }}</option>
</select>
<select v-else-if="type == 'multiple'" multiple>
  <option v-for="item in items" value="item.value">{{ item.text }}</option>
</select>
<input v-else-if="type == 'image'" type="file" id="image" name="image" accept="image/png, image/jpeg">
</template>

Vue.component('question', {
  template: '#question',
  props: {
    type: {
        default: ''
    },
    items: {
      type: Array,
      default: [
        { value: 1, text: 'One' },
        { value: 2, text: 'Two' },
        { value: 3, text: 'Three' }
      ]
    }
  }
});

这样，您应该能够传递正确的 prop ，例如“选择”，“多个”或“图像”，以显示所需的输入。

<div id="app">
  <question type='image'></question>
</div>

如果您想自己尝试，这里是fiddle。

Vue中的通用组件

2 个答案: