Как получить данные дочернего компонента в другом компоненте, НО не в родительском?

Question

[Айнур Ярулин]

Здравствуйте, есть вот такая структура.

// App.vue
<template>
  <my-select>  <!-- my-select и my-option являются двумя отдельными компонентами -->
    <my-option value="1" title="Опция 1"></my-option>
    <my-option value="2" title="Опция 2"></my-option>
    <my-option value="3" title="Опция 3"></my-option>
  </my-select>
</template>

// my-select.vue
<template>
  <div class="my-select">
    <.../> 
    <slot/>  
    <!-- вот сюда и вставляются компоненты my-option, но я хочу получить доступ 
    к данным этих компонентом, чтобы получить доступ к value и title -->
  </div>
</template>

Подскажите пожалуйста как это сделать.

P.S:
Я пробовал передать данные из компонента my-options в my-select
с помощью $emit(), но оно проходит мимо my-select и доступно для обработки
только в App.vue, где этот компонент вставляется

Answer 1

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

Инвертируй зависимость - используя scoped slots запихай в my-option требуемое, а не наоборот. https://v3.ru.vuejs.org/ru/guide/component-slots.h...

Comments

[Айнур Ярулин]

Не доходит.

Я читал про scoped slots, но получается, что конструкцию

<template v-slot:default="slotProps">
  ...
</tempalate>

можно использовать только в компоненте App.vue, где этот самый компонент используется,
мне это не подходит, потому что данные нужно передать в компонент my-select

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

Айнур Ярулин, эту конструкцию нужно использовать для того, чтобы пробросить в my-option нужные данные (а там их уже и поменять нужно, при необходимости). При этом я даже не представляю, что тебе туда надо пробросить. Или в твоей формулировке - достать.

[Айнур Ярулин]

Блиин. В общем мне нужно из компонента my-option любым способом передать данные
в компонент my-select.

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

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

Айнур Ярулин, тогда slot scope то, что нужно. в скоуп передавай функцию, её - в качестве пропса в компонент my-option, а внутри my-option - дергай при необходимости, передавая параметр.

Альтернативой был бы отказ от слота и рендер my-option внутри my-select, а передача данных только в my-select, например пропсом с массивом значений для подстановки (аналог можно посмотреть тут: https://quasar.dev/vue-components/select , параметр options)

[Айнур Ярулин]

Антон Антон,

а передача данных только в my-select

Я не стал так делать, потому что это слишком легко)

Я вроде уже нашел решение (работаю над этим).
Внутри компонента my-select я создал метод который принимает нужные мне данные
и вызываю этот метод в my-option с помощью this.$parent.$parent.мойМетод(данные)
ток хз почему нужно писать $parent 2 раза, но работает только так

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

Айнур Ярулин, я ж говорю - можно просто этот метод передать в скоуп слота и дернуть напрямую.
в "наружном "компоненте:

<slot :show="show"><!-- show - функция -->
      <q-btn @click="show">Buy</q-btn>
    </slot>

при использовании:

<my-component><template v-slot="{ show }">
                <q-btn rounded unelevated color="positive" no-caps @click="show"><span class="text-xs">My text</span></q-btn>
              </template></my-component>

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

по крайней мере это отвяжет один компонент от другого. а то все эти $parent сломаются моментально.