Супер забавная новая функция Vue: портал DOM

Vue.js

предисловие

С момента последнего«Супер забавная новая функция Vue: введение переменных JS в CSS»После пожара многие друзья лайкнули и прокомментировали, поэтому я решил превратить «Суперзабавные новые функции Vue» в серию.

Поскольку большинство текущих статей о Vue 3 сосредоточено на разговорахComposition APIа также响应式的优化, несмотря на то, что эти новые функции великолепны, все игнорируют другие новые функции. Или некоторые статьи просто упоминают об этом вкратце, а потом пишут простое демо, объяснение недостаточно подробное и глубокое.

Кроме响应式的优化а такжеComposition APIЕсть некоторые новые функции в дополнение к очень практичным. Так что не забудьте подписаться на меня, чтобы разблокировать Vue 3 с множеством интересных новых функций.

Леново

Я уверен, что все слышали об этом более или менее.порталэта фраза. Даже если вы о нем не слышали, вам стоит хотя бы посмотреть»Дораэмон"Бар! (не видел с 00-х)

Подумайте об этом в "Дораэмон«В чем чаще всего появляется реквизит?

  • Машина времени
  • бамбуковая стрекоза
  • любые ворота

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

В новой версии Vue реализовано одно из этих трех: любые ворота (портал).

портал

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

Поэтому мы используем "Дораэмон" Например:

Подумай о "ДораэмонКаковы характеристики любой двери в ?

  • назначения
  • Под влиянием среды назначения
  • Пункт назначения должен быть особенно точным

Давайте объясним:

  • назначения: Использование любой двери: «Думайте о месте назначения, когда открываете дверь, иначе вы попадете в непредсказуемые области».

  • Под влиянием среды назначения: Если пункт назначения — очень холодное место, то вы будете выглядеть примерно так:

  • Пункт назначения должен быть особенно точным: Согласно неполной статистике, каждые 10 раз, когда Нобита использует любую дверь, он открывает дверь 3 раза и видит, как Шизука принимает душ. Причина, по которой это происходит:Нобита просто хочет видетьКогда Нобита открыл дверь, он подумал, что пунктом назначения был «дом Шизуки», а в доме Шизуки много комнат, но Нобита не дал ни одной двери четких указаний, в какую комнату он идет, поэтому он пошел прямо в комнату, где Шизука была (Душевая):

(просто пример не лезь в рожки)

Портал во Vue

Затем поместите эти функции на портал Vue, чтобы увидеть:

  • назначения: Порталы используются с указанием селектора CSS в качестве пункта назначения.

  • Под влиянием среды назначения: если место назначения записывает наследуемое свойство CSS (Например: цвет), то этот стиль повлияет на отправленный ему DOM.

  • Пункт назначения должен быть особенно точным: если вы дадите адресату селектор, который соответствует многим элементам (например: раздел), то он отправит вас только к первому подходящему div (Скорее всего, это не тот div, к которому вы хотите перейти.).

Может быть, у многих до сих пор кружится голова, когда они видят это.Что толку от этой штуки? Я не пишу компоненты для инкапсуляции DOM вместе, зачем DOM отправлять в другие места?

Если вы хотите внедрить какой-то DOM в другие DOM-элементы, то лучше вводить этот компонент напрямую, разве не в этом суть компонентизации?

Смысл портала

Рассмотрим этот случай:

Я считаю, что все должны быть знакомы с картой-каруселью.Снаружи карты-карусели есть ряд кнопок.Этот ряд кнопок может управлять внутренней частью карты-карусели.индикатор панелипозиция.

Вам может показаться, что это не очень просто? Инкапсулируйте компонент, содержащий этот ряд кнопок, карусель и индикаторы панели. После завершения определите переменную положения, и какая кнопка будет нажата, переменная изменится соответствующим образом.

Позжеиндикатор панелиАбсолютное позиционирование выполняется относительно изображения карусели, и направление, в котором находится конкретное позиционирование, контролируется этой переменной положения.

Затем возникает проблема, этот ряд кнопок не обязательно находится в фиксированном положении, он может быть с левой стороны карусели или с правой стороны.
Говорят даже, что эти четыре кнопки могут находиться в других элементах DOM, далеко от карусели.

Послушав его, вы думаете, что все в порядке, я разделю это на две составляющие, и все будет кончено. Кнопка — это отдельный компонент, карусель ииндикатор панелиЕще один компонент:

Так же, как красная коробка на картинке выше, это два разных компонента, вы можете ставить их куда угодно, неважно, как далеко вы их кладете.

Когда кнопка нажата, вам нужно только использовать: emit, eventBus или Vuex... и ряд методов связи между компонентами, которые вы можете придумать для связи.
Передайте значение кнопки в карусель, а затем карусель определяется на основе значения, переданного виндикатор панелипозиция.

Это вполне достижимо, и на самом деле мы все делали это в прошлом, чтобы удовлетворить аналогичные потребности.

Но у этой реализации есть два недостатка:

инкапсуляция

Четыре значения четырех кнопок, кажется, только управляют этиминдикатор панели, он не контролирует верх, низ, лево и право других элементов на странице, то есть его значение связано только синдикатор панели.

А если есть несколько каруселей, каждая из которых управляется своим набором кнопок, межкомпонентного взаимодействия будет много.

С одной стороны, в Vuex можно определить как можно меньше состояний. С другой стороны, даже если Vuex не используется, слишком громоздко использовать излучение для отправки событий, а затем прослушивать события на родительских или предковых компонентах и ​​затем передавать их на нижние уровни, а некоторые другие методы связи компонентов не поддерживаются. намного лучше.

Так что с точки зрения инкапсуляции они должны быть единым целым:

Оба они должны быть инкапсулированы в один компонент.

возможность повторного использования

Если в проекте более одной карусели, есть и другие, которые не нужноиндикатор панеликарусель. И это не просто карусель, если есть другие дивы или другие элементы, которым тоже нужен такой, который может переключаться вперед-назад, вверх-вниз, влево-вправоиндикатор панелиИ ряд кнопок, которыми можно управлять, как поступить?

Сначала инкапсулируйте компонент кнопки, затем компонент индикатора панели, а затем компонент карусели (Вставьте компонент индикатора панели в компонент карусели.), затем компонент карусели без индикации панели, несколько других компонентов, для которых требуются панели...

Не кажется ли это громоздким, малопригодным для повторного использования и сильно связанным? Текущая ситуация возникает именно потому, что их нельзя инкапсулировать в один компонент:

Так что же мешает им быть вместе?

Ответ — структура DOM.

DOM-структура

Если вы инкапсулируете их вместе, это станет таким:

<template>
  <div>
    <!-- 按钮组件 -->
  	<Btns/>
    
    <!-- 面板组件 -->
    <Points/>
  </div>
</template>

<style>
  .points {
  	position: absolute;
  }
</style>

Хотя для компонента панели установлено абсолютное позиционирование, оно не относится к элементу DOM, относительно которого мы хотим, чтобы оно было. Лучший способ позиционирования относительно определенного элемента DOM — быть его потомком (Конечно, также установите нестатическое позиционирование для элементов-предков.).

Но теперь ограничен этим компонентом, и нет возможности стать потомком других элементов, поэтому DOM-портал был создан, чтобы решить эту проблему!

Слушая меня, вы уже понимаете значение портала DOM?
Портал DOM — это возможность переноса элементов DOM в компоненте в другие места.

Его значение лежит в:

  • С точки зрения компонентов, это все тот же компонент, и переменные и логика, определенные в компоненте, по-прежнему действуют.
  • С точки зрения структуры DOM, структура DOM контрольной точки панели стала дочерним элементом других элементов.

Применение

Во-первых, давайте«Бета-версия Vue3 была выпущена рано утром, и она даже публично поддержала проект строительных лесов»Эта статья предназначена для создания проекта, поддерживающего vue 3.

Конечно, это относится к случаю, когда вы не обновили @vue/cli.Если вы обновите @vue/cli до последней версии, вы можете создать его напрямую:

Смотреть! Предварительная версия Vue 3 уже доступна для выбора!

После того, как проект завершен, первое, что нужно объяснить, это то, чтопорталэто компонент с именем Teleport :

Затем мы хотим отправить изображение внутри компонента приложения:

Затем мы просто обернем компонент телепорта снаружи тега img:

⚠️ Компонент телепорта должен иметь атрибут to, который передает селектор css, эквивалентный месту назначения портала.

Вы можете видеть, что img в настоящее время находится внизу тела, предположительно, нижний слой должен использовать синтаксис dom.appendChild() .

Но сюрприз в том, что img на самом деле отправляется за пределы #app, вы должны знать, что vue proxy это #app:

Раньше это был новый Vue() , а затем vue был смонтирован в этом элементе #app. Хотя сейчас он был отправлен наружу, он все еще принадлежит vue? Давайте попробуем:

Вы можете видеть, что переменные и логика, определенные в компоненте, по-прежнему действительны для элемента DOM!

Что насчет стиля? Будут ли действовать стили? Попробуйте снова:

Это круто!

Но только что переданы элементы DOM, можете ли вы передать компоненты? Давайте пропустим :

Все еще нет проблем!

Но когда вы передаете строку для телепортации, ее базовый слой вызовет метод document.querySelector(). Этот метод будет соответствовать только первому элементу, который соответствует селектору, поэтому попробуйте использовать более точный селектор, например '#id'.

В дополнение к атрибуту to, телепорт также поддерживает передачу отключенного атрибута, для которого требуется логическое значение.

Иногда нам нужно динамически судить, нужно ли нам передавать по определенным условиям, но эта ситуация не подходит для v-if, потому что, если v-if ложно, хотя оно не будет передано, оно также не появится в его исходное положение, поэтому здесь пригодится disabled.

Буквально отключено означает сделать его недействительным, по умолчанию оно равно false, то естьНе делайте телепорт недействительным. Другими словами, это означает вступление в силу, поэтому давайте присвоим ему истинное значение, чтобы телепорт не вступал в силу:

Видно, что он не направляется в тело, а остается в исходном положении, и если присмотреться, то можно найти вот такой комментарий:

Докажите, что это не вы не написали телепорт, а то, что он отключен!

вдохновение

Предполагается, что вы все знаете, откуда пришел вдохновение. Друзья, которые научились реагировать, кажется, чувствуют, что этот телепорт, кажется, немного знаком.

Да, он вдохновлен React createPortal, но Vue разработан, чтобы больше соответствовать интуиции компонентизации.Давайте сравним:

На самом деле слово порталпорталзначение:

Конечно, переводчик не переводил его в портал, но смысл на самом деле похож. Суть в том, что это слово является существительным, а по логике и название компонента должно быть существительным.

Говорят, что You Yuxi сначала назвал его Portal, но я слышал, что браузер Chrome работает над компонентом . Если это удастся, он может быть развернут в браузере. Во избежание конфликтов, которые могут возникнуть в будущее, переименуйте его в глагол телепортироваться!

Эпилог

Итак, разве эта новая функция не практична и не забавна?

Если вы все еще чувствуете себя неудовлетворенным, вы можете просмотреть замечательные статьи в прошлом:

Категории