Введение во Vue Teleport — новую функцию Vue3

Введение во Vue Teleport - новую функцию Vue3

От автора: одна из новых функций Vue3, о которой уже давно говорилось, — это идея порталов — или способов перемещения HTML-шаблона в разные части DOM. Порталы, которые являются общей функцией React, были доступны во Vue2 через библиотеку portal-vue.

Теперь во Vue3 есть встроенная поддержка этой концепции с помощью функции Teleport. В этом руководстве мы рассмотрим:

Цель Teleport

Базовый пример Teleport

Некоторые интересные взаимодействия с кодом

Вот пример того, что мы будем делать.

Введение во Vue Teleport - новую функцию Vue3

Это DOM, использующий Teleport. Как видите, за пределами приложения Vue есть этот div-объект портала, куда «телепортируется» наш код шаблона. Хорошо! Давайте начнем.

Цель Teleport

Первое, что мы должны понять, это когда и для чего может пригодиться функция Teleport.

При работе с более крупными проектами Vue становится важным организовать кодовую базу логическим образом. Однако при работе с определенными типами компонентов, такими как модальные окна, уведомления или всплывающие подсказки, логика для HTML-шаблона может находиться в другом файле, чем тот, в котором мы хотели бы визуализировать элемент.

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

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

Без использования Teleport нам пришлось бы беспокоиться о распространении событий для передачи логики от дочернего компонента вверх по дереву DOM, но теперь это намного проще. Давайте рассмотрим пример.

Как работает Vue Teleport

Допустим, у нас есть дочерний компонент, в котором мы хотим вызвать всплывающее уведомление. Как мы только что обсуждали, будет проще отобразить это уведомление в совершенно отдельном дереве DOM, чем в корневом элементе Vue #app.

Первое, что нам нужно сделать, это перейти к index.html и добавить div прямо перед </body>.

<body> <div id="app"></div> <div id='portal-target'></div>
</body>

Затем давайте начнем создавать компонент, который запускает уведомление для рендеринга. Если вы не знакомы с Vue3, обязательно ознакомьтесь с введением во Vue3!

<template> <div class='portals'> <button @click='showNotification'> Trigger Notification! </button> <teleport to='#portal-target'> <div class='notification'> This is rendering outside of this child component! </div> </teleport> </div>
</template> <script>
import { ref } from 'vue'
export default { setup () { const isOpen = ref(false) var closePopup const showNotification = () => { isOpen.value = true clearTimeout(closePopup) closePopup = setTimeout(() => { isOpen.value = false }, 2000) } return { isOpen, showNotification } }
}
</script> <style scoped> .notification { font-family: myriad-pro, sans-serif; position: fixed; bottom: 20px; left: 20px; width: 300px; padding: 30px; background-color: #fff; }
</style>

В этом фрагменте, когда кнопка нажата, уведомление будет отображаться в течение 2 секунд. Однако наша основная цель — использовать Teleport, чтобы уведомление отображалось вне приложения Vue.

Как видите, у Teleport есть один обязательный атрибут – to. Атрибут to принимает допустимую строку запроса DOM, и это может быть:

id элемента

класс элемента

селектор данных

ответная строка запроса

Поскольку мы передали его в #portal-target, наше приложение Vue найдет div #portal-target, который мы включили в index.html, и телепортирует весь код внутри портала и отобразит его внутри этого div.

Изучая элементы DOM, становится очень ясно, что происходит.

Введение во Vue Teleport - новую функцию Vue3

По сути, мы можем использовать всю логику компонента VuePortals, но указать проекту визуализировать этот шаблонный код в другом месте!

Заключение

И это краткое введение в Vue Teleport. Скорее всего, в ближайшем будущем я напишу подробное руководство по более сложным сценариям использования, но это должно быть отличным местом для начала работы с этой замечательной функцией! Для получения более подробной информации обязательно ознакомьтесь с документацией Vue3.

Автор: Matt Maribojoc

Источник: https://medium.com

Редакция: Команда webformyself.