Рубрики
Без рубрики

Динамический компонентный рендеринг с порталом VUE

Автор Рафаэль Угву При строительстве фронтальных приложений, контрольно -пропускные пункты производительности могут быть охватывают … Tagged with Vue, JavaScript.

Написано Рафаэль Угву ✏

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

Vue Portal позволяет вам видеть компонент в другом месте в вашем дереве DOM. Давайте посмотрим на то, как порталы могут повысить эффективность рендеринга компонентов, таких как модалы и всплывающие окна.

Предыдущие версии порталов в Vue

Порталы всегда были в Vue Просто в виде обходных путей и плагинов. Портал-Vue это популярный плагин Vue, который создает Портал Элемент в вашем приложении и отображает любую разметку-текст, кнопки, всплывающие окна или модалы в этом элементе в другом узле DOM. Мы будем использовать Портал-Vue Чтобы проиллюстрировать, как работают порталы. Во -первых, установите его в свой проект, как и любой другой плагин:

npm install portal-vue --save

Теперь, чтобы получить более четкое представление о том, что мы пытаемся создать – давайте проиллюстрируем структуру папок нашего приложения:

+-- public
|   +-- favicon.ico
|   +-- index.html

+-- src
|   +-- main.js
|   +-- App.vue
|   +-- components
    |   +-- UserAgreement.vue
    |   +-- UserContacts.vue

|   +-- package.json

Затем включите плагин в вашем проекте:

// main.js

import Vue from 'vue'
import PortalVue from 'portal-vue'
import App from 'App.vue'

Vue.use(PortalVue)

new vue ({
  el:  '#app',
  render: h => h(App)
})

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

Далее, давайте импортируем Пользовательское агентство компонент к корневой компоненту нашего приложения:

И попробуйте отобразить:

Приведенный выше образец кода, только отображенный, не будет отображать то, что находится в элементе портала. Причина в том, что, хотя назначение портала было указано (как Пользовательские контакты ) в Useragreement.vue , это никогда не было создано. Давайте попробуем указать пункт назначения для портала, создав второй компонент, Usercontacts.vue :

Далее мы обновим App.vue соответственно:

Теперь, когда мы отображаем наш корневой компонент, мы видим контент, обернутый Портал элемент:

Когда Пользовательское агентство и Usercontact отображаются в корневом компоненте, текст в Портал Элемент будет отображаться. Это позволяет легко использовать элементы повторного использования, такие как кнопки, модалы и всплывающие уведомления, поскольку вы можете иметь несколько Портал Элементы в одном компоненте, которые затем могут быть отправлены в разные компоненты, которые им нужны. Подумайте о настройке компонента кнопки в своем проекте, вмешательстве кнопок в разные порталы и просто перевозит их туда, где они нужны в этом проекте.

Порталы и HTML

Обратите внимание, что возможности порталов не ограничиваются только единичными компонентами. В случае, когда вам может потребоваться отобразить компонент через .html Файл, вы можете использовать Target-El Опора, чтобы пройти. Допустим, нам нужно приложить кнопку, которая содержит модальную функциональность, спрашивая пользователей, хотят ли они удалить элемент или нет.

+-- App
|   +-- index.html
|   +-- style.css
|   +-- index.js

Во -первых, мы включим Vue и Портал-Vue через сценарий ярлык:

Затем мы создадим модал, который отображает сообщение:



Vue.component('RemovePhoneModal', {
  template: `
      

        

          

           Are you sure you want to remove this phone from your list?
`, props: [‘open’], methods: { close() { this.$emit(‘close’) } } })

Далее, все еще в index.js Мы создадим компонент для кнопки, этот компонент встроит модальный:

Vue.component('RemovePhoneButton', {
  template: `
    
  `,
  data() {
    return {
      open: false,
    }
  },
  methods: {
    openModal() {
      this.open = true
    },
    close() {
      this.open = false
    }
  }
})

Затем мы создадим экземпляр Vue для нашего приложения:

const app = new Vue({
  el: '#app',
})

Далее мы создадим наш шаблон HTML:







    
    
    
    Phone App

Наконец, мы добавим несколько переходов через Tailwind CSS Анкет Включите его сценарий CDN в Тег вашего index.html файл:

Затем определите свой переход CSS, он может отличаться от моего, если вы хотите:



.fade-shrink-in-enter-active,
.fade-shrink-in-leave-active {
  transition: all .3s ease;
}

.fade-shrink-in-enter,
.fade-shrink-in-leave-to {
  opacity: 0;
  transform: scale(1.1);
}

Для справочных целей вы можете просмотреть ручку этой демонстрации Здесь Анкет Давайте посмотрим, как это работает в фрагменте видео ниже:

Как работают порталы в Vue 3

Много Значительные улучшения были доступны в VUE 3, например:

  • Композиция API
  • Фрагменты
  • Неизвестность
  • Несколько V-модели
  • Пользовательская директива API

Порталы не являются исключением, потому что в последнем выпуске Vue они станут встроенной функцией. Важно отметить, что их основная функциональность все еще останется прежней – единственное отличие будет заключаться в том, что порталы не должны быть установлены, поскольку они будут поступать в форме Портал элемент. У них будет только одна собственность, цель который делает содержание в Портал Элемент к элементу DOM, который имеет тот же селектор запросов ( id или class ) передано в цель проп.

Давайте попробуем воссоздать один из наших предыдущих примеров, внедрив портал, как это должно появиться в Vue 3:



Vue.component('RemovePhoneModal', {
  template: `
      

        

          

           Are you sure you want to remove this phone from your list?
`, props: [‘open’], methods: { close() { this.$emit(‘close’) } } })

Далее, в нашем index.html Файл, у нас будет Портал Элемент упаковка Удалить phonemodal с id который будет упоминаться в другом элементе DOM:

Вывод

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

Испытайте ваши приложения Vue именно так, как пользователь делает

Отладка приложений Vue.js может быть трудной, особенно когда есть десятки, если не сотни мутаций во время сеанса пользователя. Если вы заинтересованы в мониторинге и отслеживании мутаций VUE для всех ваших пользователей в производстве, Попробуйте Logrocket.

Logrocket похож на DVR для веб -приложений, запись буквально все, что происходит в ваших приложениях VUE, включая сетевые запросы, ошибки JavaScript, проблемы с производительностью и многое другое. Вместо того, чтобы догадаться, почему возникают проблемы, вы можете объединить и сообщить о том, в каком состоянии было ваше заявление, когда возникла проблема.

Плагин Logrocket Vuex регистрирует мутации VEUEX в консоли Logrocket, давая вам контекст вокруг того, что привело к ошибке, и в каком состоянии было приложение, когда возникла проблема.

Модернизируйте, как вы отлаживаете свои приложения VUE – Начните мониторинг бесплатно.

Пост Динамический компонентный рендеринг с Vue Portal появился первым на Logrocke Blog Анкет

Оригинал: “https://dev.to/bnevilleoneill/dynamic-component-rendering-with-vue-portal-3p9h”

Читайте ещё по теме: