Встроенные компоненты Vue3

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

Ниже приведены некоторые распространённые встроенные компоненты Vue и их функции:

1. компонент

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

Путём привязкиisатрибута можно реализовать переключение и отображение динамических компонентов.

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

2. transitionиtransition-group

<transition>и<transition-group>Обеспечивает возможность реализации переходов и анимаций в Vue.js.

Определяя имена CSS-классов для переходов, можно управлять эффектами анимации элементов при их входе в DOM или выходе из него.

<transition name="fade">
  <div v-if="show">Hello!</div>
</transition>

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

3. keep-alive

<keep-alive>Это абстрактный компонент, используемый для сохранения состояния компонента или предотвращения множественных повторных рендеров.

Когда компонент<keep-alive>обёрнут, его состояние будет кэшировано вместо повторного рендеринга при каждом переключении.

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

4. slot

<slot>Это компонент слота в Vue.js, используемый для вставки содержимого. Он позволяет родительскому компоненту передавать содержимое в определённые позиции слотов внутри дочернего компонента, делая компоненты более гибкими и переиспользуемыми.

<child-component>
  <template #header>
    <h2>Header Content</h2>
  </template>
  <template #default>
    <p>Default Content</p>
  </template>
</child-component>

5. teleport

<teleport>Позволяет отображать DOM-элементы в любом месте приложения, не ограничиваясь текущей структурой DOM. Это очень полезно, когда необходимо динамически перемещать элементы в приложении, например отображать содержимое всплывающего окна в модальном окне.

<teleport to="body">
  <modal-dialog v-if="showModal">
    <!-- modal content -->
  </modal-dialog>
</teleport>

6. Suspense

<Suspense>Это компонент, недавно добавленный в Vue.js 3.x, используемый для обработки загрузки и состояния асинхронных компонентов. Он может отображать содержимое-заполнитель до завершения загрузки асинхронного компонента и обрабатывать состояния загрузки и ошибки.

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>