Как узнать, что находится внутри slot?

Question

[reasonov]

Добрый день, возникла такая ситуация: у меня есть компонент Drawer, в тело которого, через slot, я передаю какой то темлпейт. Может быть ситуация, когда внутри Drawer будет лежать еще один Drawer, в таком случае, при открытии вложенного, мне нужно навесить стили на родительский Drawer.

Компонент Drawer:

<div v-if="props.isOpen">
    <div class="drawer__body">
        <slot name="body" />
    </div>
</div>

Использование компонента:

<TheDrawer :isOpen="state.isDrawer" @closeDrawer="state.isDrawer = false">
    <template v-slot:body>
         <button @click="state.multiDrawer = true">ОТКРЫТЬ DRAWER</button>
         <TheDrawer :isOpen="state.multiDrawer" @closeDrawer="state.multiDrawer = false" />
    </template>
</TheDrawer>

Answer 1

[Антон Антон]

Зависимость от содержимого это очень криво. Правильнее было бы в скоуп слота выставить ручки для дергания из содержимого, передавать их в качестве пропсов в содержимое и дергать их. Ну или эмитить эвенты из компонента Drawer и в самом компоненте в котором оба Drawer их ловить и в обработчике устанавливать пропсы внешнего Drawer.
Либо если это рекурсивная динамическая структура, запихать её в стор и управлять всем через его данные и действия.

Comments

[reasonov]

А можете пример первого варианта накинуть?

[Антон Антон]

вот фрагмент документации: https://vuejs.org/guide/components/slots.html#scop...

[reasonov]

Антон Антон, спасибо, пропустил мимо глаз, попробую)

[Антон Антон]

reasonov, это просто супер мощная штука

Answer 2

[Aetae]

Тебе ответили в общем, но в конкретном случае можно просто делать provide и inject в этом дровере. Если есть inject - значит где-то в родителях есть другой дровер и собсно через заинжекченое можно им управлять..