От автора: одна из новых функций Vue3, о которой уже давно говорилось, — это идея порталов — или способов перемещения HTML-шаблона в разные части DOM. Порталы, которые являются общей функцией React, были доступны во Vue2 через библиотеку portal-vue.
Теперь во Vue3 есть встроенная поддержка этой концепции с помощью функции Teleport. В этом руководстве мы рассмотрим:
Цель Teleport
Базовый пример Teleport
Некоторые интересные взаимодействия с кодом
Вот пример того, что мы будем делать.
Это 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, становится очень ясно, что происходит.
По сути, мы можем использовать всю логику компонента VuePortals, но указать проекту визуализировать этот шаблонный код в другом месте!
Заключение
И это краткое введение в Vue Teleport. Скорее всего, в ближайшем будущем я напишу подробное руководство по более сложным сценариям использования, но это должно быть отличным местом для начала работы с этой замечательной функцией! Для получения более подробной информации обязательно ознакомьтесь с документацией Vue3.
Автор: Matt Maribojoc
Источник: https://medium.com
Редакция: Команда webformyself.