На какой хук жизненного цикла 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]

Спасибо!