Нет ref-ссылки на компонент, переданный в слоте дочернего компонента

Question

Для меня стало открытием то, что я не могу достучаться к ref в компоненте, который определил как слот для дочернего компонента.

Вот пример:

<template>
  <header ref=“header”>
    <logo ref=“logo”></logo>
  </header>
</template>

В компоненте Header.vue внутри определен просто дефолтный <slot></slot>.

И проблема в том, что к компоненту Logo.vue я достучаться из своего компонента не могу.

Ни через this.$refs[‘logo’], ни через this.$refs[‘header’].$refs[‘logo’]. Ни через слоты компонента Header.vue. Никак...

Скажите, как быть.

Answer 1

Я конечно новичок в vue, но мало ли поможет Я к слотам обращаюсь внутри родительского тега(у вас header) таким образом:

<template v-slot:no-data>
    <v-btn @click="initialize">Refresh</v-btn>
</template>

Answer 2

Если вы используете Vue2 то просто забудьте про доступ к компонентам через слоты - оно того не стоит. В Vue3 вам может помочь $slots и $scopedSlots.