Общие компоненты в 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

Ваш компонент может быть примерно таким

<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 , такие как 'select', 'multiple' или 'image', чтобы показать желаемый ввод.

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

Вот скрипка , если вы хотите попробовать сами.