На какой хук жизненного цикла vue.js «повесить» обработку события другого компонента?

Question

[Androbim]

Имеется поле поиска с выпадающим списком, который появляется в результате автозаполнения поля, это работает.
Задача: при клике на любом свободном месте, то есть, на родительском компоненте закрывать (прятать) список, то есть, дочерний компонент.
События обрабатывается через общую шину.
При клике на свободном месте событие корректно генерируется.

В родительском компоненте:

methods: {
    searchClose: function() {
      console.log('Клик') // Это срабатывает
      bus.$emit("searchclose"); // Это тоже срабатывает
    }
  }

Но непонятно, на какой хук списка можно повесить обработчик?
Я пытался и created() и mounted(), но не работает.

В дочернем компоненте:

created() {
    bus.$on('searchlose', function() {
      this.searchList = false;
    })
  },

Что я делаю не так?

Answer 1

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

У вас в коде опечатка, но вообще-то обычно в таком случае сам "дочерний компонент" содержит абсолютно позиционированную подложку на весь экран, показываемую при необходимости (например:

position: absolute; 
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;

) на клик по которой и вешается закрытие всплывающего сдержимого компонента, у самого "всплывающего содержимого" компонента устанавливается нужный z-index, чтобы он не закрывался подложкой.
Чтобы за свои интерфейсные функции компонент отвечал целиком сам.

Comments

[Androbim]

Спасибо! Отмечу, как решение. Уверен, что работать будет, а по структуре все логично.

Answer 2

[Ihor Bratukh]

bus.$on('searchсlose', function() {
      console.log('Поймал!'); // не срабатывает
      this.searchList = false; // не срабатывает
})

this потеряли, вместо function() пишите () =>

Comments

[Androbim]

Спасибо!