Как в дочернем элементе прослушать событие @click, которое произошло в родительском элементе, не используя Vuex?

Question

[pmozil]

Я совсем недавно начал изучать vue и начал писать простое приложение, которое состоит из двух компонентов. Приложение получает строку через инпут, обращается к API и на базе ответа строит ответ, который через v-for отображается во втором компоненте.

1 компонент это шапка приложения с инпутом и кнопкой поиска.
2 компонент - это обращение к файлу api.js и логика вывода ответа в этом же компоненте в элемент ul.

Если от родительского компонента к дочернему мы можем передать только props, а $emit работает только в другую сторону.
С помощью пропс, я передаю input.value, которое использую для создания запроса к API.

Собственно вопрос:
Как в ребенке прослушать событие клик, которое происходит в родителе и затем запустить запрос к API и отобразить результат.

Кроме того, как передать булевую переменную через пропс, по клику в родителе присваивает ей противоположное значение и в ребенке через watch запускать функцию запроса к апи, я не придумал.

Comments

[Alex_mos]

Я правильно понимаю что у вас шапка и список(где запрос к api) это дочерние компоненты?

[pmozil]

Alex_mos, Да, шапка с инпутом подключаются к App.vue, а список(где запрос к апи) подключается к шапке.

[Alex_mos]

pmozil, Я конечно тоже не очень давно изучаю vue, но почему в таком случае не вынести запрос к апи в шапку?
Получить данные с инпута, нажать кнопку поиска, получить данные из апи и в качестве параметра передать списку что бы отрисовать данные.
Если я правильно понял вопрос, вы хотите прослушать событие клика кнопки поиска у инпута?

[pmozil]

Alex_mos, да можно вообще все в одном компоненте написать. Но я знаю,что такой подход не является правильным. Во время изучения у меня возникло непонимание передачи данных между компонентами. Решить то мне удалось проблему по своему с помощью watch.
Суть не в том как с помощью костыля либо с помощью изменения в архитектуре решить проблему(как как приложение маленькое и в принципе можно бы было), но как решить ее исходя из того что имеем, ничего не меняя.

Answer 1

[furashcka]

Если я правильно понял, то вам нужно из род. компонента прокинуть событие, в данном случае click, в дочерний компонент, делается это так:

<template>
<div class="parent">
  <child-component ref="child" />

  <button @click="$refs.child ? $refs.child.onClick($event) : ``">Ok</button>
</div>
</template>

Соответственно род. компонент должен реализовать метод, onClick:

export default {
  name: `child-component`,

  methods: {
    onClick($event) {
      console.log(`$event :>>`, $event);
    }
  }
}

Comments

[pmozil]

Огромное спасибо! Все получилось. Только не с первого раза :)

Если метод onClick() реализовать в родительском компоненте, то у ребенка такого метода не будет и соответсвенно он не будет доступен по пути $refs.child.onClick().
И я получил ошибку "_ctx.$refs.child.onClick is not a function".
Но когда я передал и вывел в консоли просто $refs.child и получил прокси объект:

Proxy(Object) 
{dataRequest: ƒ, …}
[[Handler]] : Object
[[Target]] : Object
[[IsRevoked]] : false

то обнаружил что во вложенном объекте Target лежат все методы дочернего элемента. И вот когда я перенес метод onClick в дочерний, все заработало!