@Androbim

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

Доброго времени суток!

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

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

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

В дочернем компоненте:
created() {
    bus.$on('searchlose', function() {
      this.searchList = false;
    })
  },

Что я делаю не так?
С уважением.
  • Вопрос задан
  • 392 просмотра
Решения вопроса 2
Fragster
@Fragster
помогло? отметь решением!
У вас в коде опечатка, но вообще-то обычно в таком случае сам "дочерний компонент" содержит абсолютно позиционированную подложку на весь экран, показываемую при необходимости (например:
position: absolute; 
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;

) на клик по которой и вешается закрытие всплывающего сдержимого компонента, у самого "всплывающего содержимого" компонента устанавливается нужный z-index, чтобы он не закрывался подложкой.
Чтобы за свои интерфейсные функции компонент отвечал целиком сам.
Ответ написан
BRAGA96
@BRAGA96
bus.$on('searchсlose', function() {
      console.log('Поймал!'); // не срабатывает
      this.searchList = false; // не срабатывает
})


this потеряли, вместо function() пишите () =>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы