Если вы используете однофайловые компоненты Vue, то вам, конечно же, знаком способ подключения компонента внутри другого компонента:

• импортируем компонент;
• регистрируем его в объекте компонентов родителя;
• используем компонент в шаблоне

<template>
    <some-random-thing />
</template>
<script>
    import SomeRandomThing from './components/SomeRandomThing'
    export default {
        components: {
            SomeRandomThing,
        },
    }
</script>

Это привычный паттерн. Но что если нам понадобится динамическое отображение компонента? Давайте посмотрим как нам разнообразить отношения с компонентами.

Итак, у нас есть компонент Header. Допустим, информация в хедере может меняться в зависимости от каких-то условий. Далее, у нас есть компоненты UserInfo и CompanyInfo. И мы хотим показывать какой-то из них в зависимости от какого-то условия. Как это сделать?

Способ 1: старый добрый и проверенный

Этот способ мы обсуждали в самом начале. Именно его выберет большинство разработчиков.

<template>
  <div>
    <company-info v-if="isCompany" />
    <user-info v-else />
    ...
  </div>
</template>

<script>
import UserInfo from './components/UserInfo'
import CompanyInfo from './components/CompanyInfo'
export default {
    components: {
        UserInfo,
        CompanyInfo
    },
    props: {
        isCompany: { type: Boolean, default: false },
    },
}
</script>

Ничего необычного. Мы импортируем два компонента, регистрируем их, и показываем один из них в зависимости от значения входного параметра.

Вы наверняка постоянно так делаете. Но то же самое можно сделать немного лучше.

Способ 2: используем <component />

Component это встроенное во Vue определение компонента. Он работает как плейсхолдер для отображения любого компонента, имя которого передаётся через параметр :is.

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

<script>
import UserInfo from './components/UserInfo'
import CompanyInfo from './components/CompanyInfo'
export default {
    components: {
        UserInfo,
        CompanyInfo,
    },
    props: {
        isCompany: { type: Boolean, default: false },
    },
    computed: {
        componentName () {
            return this.isCompany ? 'company-info' : 'user-info'
        },
    },
}
</script>

Здесь мы используем <component /> и создали вычисляемое свойство с именем необходимого компонента, что позволило отказаться от громоздкой конструкции v-if/v-else.

Но это ещё не всё. Несмотря на использование <component />, нам по прежнему приходится импортировать и регистрировать компоненты UserInfo и CompanyInfo. Вот если бы можно было импортировать только необходимый компонент... И тут нам поможет динамический импорт

Способ 3: динамический импорт + <component /> (и бонусом разделение кода)

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

<script>
export default {
    props: {
        isCompany: { type: Boolean, default: false },
    },
    computed: {
        componentInstance () {
            const name = this.isCompany ? 'CompanyInfo' : 'UserInfo'
            return () => import(`./components/${name}`)
        }
    }
}
</script>

В этом варианте для импорта компонента мы используем функцию, которая возвращает Promise. И если всё идёт хорошо, то Promise разрешается и загружается только необходимый нам компонент, который мы передаём <component /> для рендеринга. Да, так можно. Согласно документации, свойство :is может содержать:

• Имя компонента или
• Объект компонента

А объект компонента это именно то, что нам нужно.

И вот мы существенно сократили наш код, нам больше не нужно вручную импортировать и регистрировать компоненты. Всё происходит динамически. Более подробную информацию о динамическом импорте смотрите в документации.

Таким образом мы немного упростили себе жизнь, сократив количество кода, и мимоходом уменьшили объём итогового файла приложения. Ведь динамический импорт он на то и динамический, что необходимый компонент будет подгружаться только при необходимости.