Как рендерить переменные компоненты в vue как jsx?

Question

• 1000 Если бы у меня был такой шаблон, как:

<template>
  <variable-comp />
</template>

, я бы хотел динамически изменить, что такое переменная-comp. Я знаю v-if и v-for, но это не одно и то же.

Answer 1

vue использует этот синтаксис для динамических c компонентов

<component v-bind:is=”currentComponent”/>

, где 'currentComponent' - это имя (строка) компонента.

т.е.

<template>
  <component v-bind:is=”currentComponent”/>
</template>

import CompA from './CompA.vue'
import CompB from './CompB.vue'
export default {
  components: {
    CompA,
    CompB
  },
  data() {
    isA: true
  },
  computed: {
    currentComponent() {
      return isA ? 'CompA' : 'CompB'
    }
  }
}