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

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

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

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

Цель Teleport

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

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

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

Введение во 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>.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

В этом фрагменте, когда кнопка нажата, уведомление будет отображаться в течение 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.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.