Идея порталов в Vue3: новая функция Teleport | Журнал "Вольт"
Вс. Окт 25th, 2020


Представляем Vue Teleport - новую функцию Vue3

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

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

Цель телепортации

Базовый пример телепортации

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

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

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

Учить больше

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

Представляем Vue Teleport - новую функцию Vue3

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

Цель телепортации

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

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

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

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

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

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

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

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

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

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

Учить больше

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

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

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

идентификатор элемента

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

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

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

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

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

Представляем Vue Teleport - новую функцию Vue3

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

Вывод

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

Автор: Мэтт марибойок

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

Сотрудники редакции: Команда Webformyself.

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

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

Учить больше

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

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

Посмотрите



Source link

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *