PortalVue может быть действительно полезной функцией и может сделать ваш проект более динамичным.

Знаете ли вы, что мы не можем использовать детский слот ребенка? Теперь ты знаешь. Но что, если у нас есть эта структура, и мы абсолютно обязаны это сделать? Что ж, есть решение.

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

К счастью, есть другое решение, которое может решить мою проблему.

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

Установка PortalVue

Во-первых, давайте установим PortalVue в нашем проекте и посмотрим, как его можно использовать вместо слотов в примерах чуть ниже:

npm install --save portal-vue

И иметь возможность использовать его в проекте.

import PortalVue from 'portal-vue'

Vue.use(PortalVue)

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

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

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

В вашем main.js просто импортируйте его следующим образом:

import { Portal, PortalTarget } from 'portal-vue'
Vue.component('portal', Portal) 
Vue.component('portal-target', PortalTarget)

Используйте его как слот

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

Родительский > Дочерний (1) > Дочерний (2)

Это означает, что я хотел бы иметь слот в компоненте «Дочерний (2)» и передать его в компонент «Родительский».

Давай сделаем это.

// Child (2)
<template>
   <div>
     <portal-target name="content"/>
   </div>
</template>

В приведенном выше примере у нас есть компонент «Дочерний (2)», в котором мы хотели бы отобразить некоторый контент, который мы передадим в компонент «Родительский».

Для этого нам нужно использовать элемент "portal-target" и присвоить ему определенное имя.

Что ж, в компоненте Child (1) у нас будет просто импортированный Child (2).

<template>
  <div>
    <Child2/>
  </div>
<template>

Как видите, мы не передаем ему никаких реквизитов.

И в нашем Родительском компоненте у нас есть еще один новый элемент, "portal", в который мы должны передать имя "portal-target". 

<template>
   <div>
   <portal to="content">
       <div>
          <p>Some content to display in Child (2)</p>
       </div>
   </portal>
</template>

Это почти все.

Заключение

PortalVue может быть действительно полезной функцией и может сделать ваш проект более динамичным. Лучшее в этом то, что вы можете передавать содержимое данных из ЛЮБОГО компонента в ЛЮБОЙ другой компонент из ВЕЗДЕ, даже если он не вложен. как ребенок.

Я надеюсь, что это было полезно для вас! Удачного кодирования! 🚀

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn и Discord.