Блог

Недавно я играл с динамическими компонентами в Vue 2.

Допустим, у нас есть два компонента SignIn и SignOut, которые должны быть отображены условно.

 import SignIn from '~/components/SignIn.vue
import SignUp from '~/components/SignUp.vue

export default {
components: {
  SignOut,
  SignIn
}
data() {
  return { 
    condition: true
  }
}
 

Обычно я использую шаблон условного рендеринга Vue следующим образом:

 <template>
  <SignIn v-if="condition" />
  <SignUp v-else />
</template>
  
 

Но я могу достичь того же результата с помощью шаблона динамических компонентов.

 <script>
data() {
  return {
    condition: true,
    component: this.condition ? 'SignIn' : 'SignUp'
  }
}
</script>

<template>
  <component :is="component" />
</template>
 

Что вы об этом думаете?