Как во Vue 3 получить данные из другого, глубоко вложенного, компонента

Структура следующая, есть модальное окно (компонент modal), внутри него другой компонент (назовем оболочкой внутри модального окна, компонент settings), внутри этой оболочки находится панель tabs-panel, а уже внутри нее находится компонент формы с нужными мне данными (компонент ep-form).
Так вот, внутри оболочки (компонент settings) есть кнопка, по нажатию которой я хочу получать данные из формы (ep-form).
Модель структуры:

--modal
----settings (панель оболочка, в которой есть кнопка по нажатию которой получать данные из формы)
------tabs-panel
--------ep-form (из селекта внутри этого компонента нужно получить данные)

Упрощенный код:

/* Модальное окно */
<template lang="pug">
div
  div(class="flex-1")
    slot(name="body")
  div
    slot(name="bottom-toolbar")
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'modal',
  props: {
    modalShow: {
      type: Boolean,
      default: false
    }
  },
})
</script>

/* Оболочка внутри модального окна */
<template lang="pug">
div
  modal(v-model:modalShow="modalShow")
    template(v-slot:body)
      tabs-panel
    template(v-slot:bottom-toolbar)
      def-button(@click="toast(); checkAndCloseModal();") OK

<script>
name: 'settings'
methods: {
  checkAndCloseModal() {
    /*
     Получить данные из компонента ep-form,
     а конкретнее value из select(name="type-list") (см.ниже)
    */
  }
}
</scripts>

/* tabs-panel внутри оболчки панели */
<template lang="pug">
div
  ep-form
</template>
<script>
name: 'tabs-panel'
</script>

/* ep-form внутри tabs-panel */
<template lang="pug">
div
  select(name="type-list")
    option(
      v-for="item in getItems"
      :value="item.id"
      :key="item.id"
    ) {{ item.name }}
</template>
<script>
export default {
  name: 'ep-form'
}
</script>

Подскажите как просто можно получить value из селекта? По цепочке прокидывать пропсы как-то не очень, через CompositionAPI я так и не понял как можно (и можно ли вообще)


Ответы (1 шт):

Автор решения: reznikovkg

Сразу приходят два варианта

  1. Простой способ. Через this.$children Подробнее тут
  2. Использовать store, но потребуется интеграция на все приложение, что может быть излишним

UPD. Сорри, в последних версиях vue вырезали первый вариант, попробуйте через refs

→ Ссылка