Динамически отображать компонент Vue

Используя Vue, вы определяете макет приложения с помощью компонентов. Вначале вы вручную размещаете компоненты там, где хотите, но в какой-то момент вам понадобится более гибкий способ показать или скрыть компоненты в зависимости от состояния приложения.

Использование условных директив

Самый простой вариант - использоватьv-ifиv-elseдирективы.

Вот пример. Вv-ifдиректива проверяетnoTodosвычисляемое свойство, которое возвращает false, если свойство состоянияtodosсодержит хотя бы один элемент:

<template>
  <main>
    <AddFirstTodo v-if="noTodos" />
    <div v-else>
      <AddTodo />
      <Todos :todos=todos />
    </div>
  </main>
</template>

<script> export default { data() { return { todos: [], } }, computed: { noTodos() { return this.todos.length === 0 } } } </script>

Это позволяет удовлетворить потребности многих приложений, не прибегая к более сложным настройкам. Условные выражения тоже могут быть вложенными, например:

<template>
  <main>
    <Component1 v-if="shouldShowComponent1" />
    <div v-else>
      <Component2 v-if="shouldShowComponent2" />
      <div v-else>
        <Component3 />
      </div>
    </div>
  </main>
</template>

С использованиемcomponentКомпонент иis

Вместо созданияv-ifиv-elseструктур, вы можете создать свой шаблон так, чтобы там был заполнитель, которому будет динамически назначаться компонент.

Вот чтоcomponentкомпонент делает, с помощьюv-bind:isдиректива.

<component v-bind:is="componentName"></component>

componentName- это свойство состояния, которое определяет имя компонента, который мы хотим визуализировать. Это может быть часть состояния или вычисляемое свойство:

<script>
export default {
  data() {
    return {
      componentName: 'aComponent',
    }
  }
}
</script>

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: