Как вызвать функцию из одного дочернего компонента в родителе, если событие эмитируется родителю из другого дочернего компонента?

Question

[Andy Koshman]

Есть дочерний компонент с некой логикой валидации такого вида:
ThePersonalDetailsListData.vue

<template>
  <div></div>
</template>
<script setup>
import {ref, defineEmits } from 'vue';

  const getValidate = () => {
  	console.log('validate');
  }

  const emit = defineEmits(['form-validation']);

  emit('form-validation', getValidate);
 
</script>

так же есть родитель:
App.vue

<template>
 <TheFormNavigation @open-modal="openModalAndSendData"/>
  <form>
    <router-view></router-view>
  </form>
</template>
<script setup>
import {ref} from 'vue'
import TheFormNavigation from './components/TheFormNavigation.vue';

const validation = (getValidation) => { // нужно что то типа такого
  if (typeof getValidation === 'function') {
    getValidation();
  }
}

const openModalAndSendData = () => {
  validation();
}

</script>

и другой дочерний компонент для App.vue в котором есть кнопка отправляющая данные на сервер:
TheFormNavigation.vue

<template>
  <button @click="getValidate">Click</button>
</template>
<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits('open-modal');

function openModal() {
  emit('open-modal'); 
}

</script>

Суть в том что мне в компоненте App.vue нужно запустить функциюgetValidate() из дочернего компонента ThePersonalDetailsListData.vue. Но я не понимаю как это можно реализовать, ведь кнопка находится в компоненте TheFormNavigation.vue при клике по которой я эмитирую событие родителю App.vue и вызываю функциюopenModalAndSendData(), а функция getValidate() находится в компоненте, который является дочерним для App.vue , но по сути никак не связан с компонентом навигации. Вот такая иерархия на данный момент:

Возможно ли это реализовать, EventBus?

Это нужно для того, чтобы при клике по кнопке отправки формы<BaseButton>отработала валидация getValidate(), если так захочется серверу.

Comments

[iljaGolubev]

Можно, но не нужно. Вы сильно упростите себе жизнь если будете следовать общей концепции https://vuejs.org/guide/components/props.html#one-....
Кроме props, её можно расширить на взаимодействие родитель->потомок, но никогда наоборот.
Организуйте свой код так, чтобы App указывал как открыть Форму ( в модалке или инлайн), а форма работала с данными (проверка и отправка). результаты наверх в App через emit. App закрывает модалку.
Если хочется сложностей - пробуйте
provide-inject или composables

[Andy Koshman]

iljaGolubev, Мне нужно работать уже с текущей структурой, наверное без сложностей не обойтись). По сути дочерний компонентThePersonalDetailsListData имеет в себе только бизнес логику и запрос на валидацию, в App я отправляю все данные на сервер, а другой дочерний компонент TheFormNavigation не имеет ничего общего с ThePersonalDetailsListData, в нем находится кнопка, которая открывает модалку с текстом отправлена форма или нет. Поэтому я и решил при событии отправки формы как то передать функцию валидации из дочернего в дочерний с эмитом для запуска у родителя, если форма не может быть отправлена.

[modelair]

собственно, а в чем проблема передать клик наверх?
вы как-то всё так завернули непонятно.
TheFormNavigation.vue - где функция с клика кнопки?

[modelair]

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

[Andy Koshman]

modelair, Вот я приблизительно набросал:
https://replit.com/@teplandrey41/Form#src/componen... нужно из А в С (родитель) передать getValidate() изначально думал что функцию нужно обязательно прокидывать в В и потом эмитировать в С, тут как бы прокидывается напрямую из А в С, но наверное это не правильно, потому что события не происходит никакого. За expose просмотрю, спасибо.

[modelair]

Andy Koshman, ясности стало еще меньше:) router-view не передаст событие как вы там описали. ну и проверьте весь код, проименуйте импорты и компоненты.
UPD предыдущего сообщения: не именованные слоты, а скоуп-слоты. https://vuejs.org/guide/components/slots.html#scop...

[Andy Koshman]

modelair, Ну так то я смог передать функцию из дочернего в родитель:

Но хотелось бы что та на подобии этого <router-view v-slot="slotProps"></router-view>, потому что все дочерне компоненты находятся тут. Ну а это уже моя фантазия, то что хотелось бы реализовать:

@open-modal="openModalAndSendData(slotProps.getValidate())"/>

[SymphoGraph]

Andy Koshman, передавать функции из потомков в родителя нецелесообразно.
Тем более, что в вашем случае это и не работает:
emit('form-validation', getValidate);
Эта конструкция передаст не функцию, а то, что она возвращает.
В компоненте C вы вызываете функцию 'validation', но ничего туда не предаёте.
Вместе с этим функция validation пытается вызвать функцию getValidation(), которая нигде и никогда не объявлялась.
Попробуйте сосредоточиться не на передаче функции, а на конечной цели, которой вы хотите достичь. Возможно, это поможет объявить функцию там, где она востребована.

[Andy Koshman]

SymphoGraph, Отвлекаясь от контекста текущего вопроса, объясните пожалуйста, почему передавать функции из потомков в родителя нецелесообразно? Ведь допустим если есть потомок с определенной функцией, то почему её нельзя теоретически передать родителю и там же вызвать? У меня опыта не много, но звучит вроде не страшно. А за последний совет спасибо.

[SymphoGraph]

Andy Koshman, тут важно понимать, что 'нецелесообразно' не синоним слова 'нельзя', так же как и 'принципы' не синоним слова 'законы'. Главным образом, дело в том, что если у задачи есть более простые способы решения, то отдавать им предпочтение как раз целесообразно. Вы выбрали сложный способ, код стал запутанным и сложным для понимания. Это и привело к тому, что вы стали совершать в нём ошибки.
Если вы хорошо разберётесь в способах, которые вам предложили modelair и iljaGolubev (expose - вызов функции потомка из родителя, provide/inject - передача данных или функций потомкам), то вы и без всяких принципов станете применять верный.

[modelair]

Andy Koshman, в продолжение к сообщению от SymphoGraph - вот один из примеров такого использования: Как вызвать функцию в дочернем элементе из родителя app во vue.js?

немного не в сегодняшнем для меня стиле написано, но я сейчас обновлю

[modelair]

Andy Koshman, вот рабочий и простой пример работы. вы его поймете и там уже будет вам ясно, как сделать то что хотите
Vue play

[Andy Koshman]

modelair, Да спасибо, мне помог defineExpose, у родителя вызываются функции потомка. У меня конечно все компоненты находятся в<router-view/>, но я вроде смог в нём объявить один из дочерних компонентов и вызвать функцию таким образом: , но у меня несколько дочерних компонентов и теперь пытаюсь понять как быть, сейчас видны либо все компоненты <router-view/>, либо текущий дочерний

<router-view v-slot="{ ThePersonalDetailsData }">
        <ThePersonalDetailsData ref="refChild" :is="ThePersonalDetailsData" />
      </router-view>

, а так в целом спасибо большое, суть уловил)

[Andy Koshman]

SymphoGraph, Спасибо за толковый ответ, с вами и не поспоришь)