Нововведения Vue 3: Teleport. Зачем и как?

наверх

Добрый день!

Сегодня мы рассмотрим нововведение Vue.js 3: Teleport.

Зачем нужно?

Наиболее частый случай: у нас есть наше vue приложение и есть какое-то модальное окно (которое может не быть компонентом и находиться в отдельной dom-ноде). И, допустим, мы хотим отобразить содержимое из нашего App.vue в этом модальном окне.

Как раз для работы с такими случаями и подойдет vue teleport.

Как использовать?

Достаточно обернуть кусок кода в <teleport> и указать to. Можно указать id, class или data-attribute элемента, в который мы хотим добавить какой-то контент.

<template>
  <teleport to="#modals">
    <div>Какой-то контент</div>
  </teleport>
</template>

<teleport to="#modals">
  <div>A</div>
</teleport>
<teleport to="#modals">
  <div>B</div>
</teleport>

<!-- result-->
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

Подробнее для вас записал видео.

Приятного просмотра!