Как добавить обратный вызов в корень Vue, который срабатывает при обновлении дочерних компонентов

Question

У меня есть боковая панель Semantic UI, которая использует модуль видимости Semantic UI для выделения элементов в меню боковой панели, когда они прокручиваются на странице. Мне нужно обновлять эту конфигурацию видимости каждый раз, когда длина страницы изменяется. Это часто случается, когда моя страница Vue первоначально загружается, а затем время от времени, когда пользователь добавляет биты на страницу.

Я хотел бы просто иметь возможность добавить обратный вызов updated к корневому элементу Vue и запускать его каждый раз, когда обновляется любой компонент-потомок, но это, похоже, не так. Есть ли способ сделать это аккуратно? Мне бы не хотелось мусорить кучу компонентов с помощью этого updated обратного вызова.

Answer 1

вы можете использовать шину событий vue для запуска событий из разных компонентов.

Сначала инициализируйте Vue.prototype.$bus = new Vue(); в файле main.js.

затем используйте его для отправки событий:

this.$bus.$emit('throw', 'Hi')

тогда пусть ваш основной компонент прослушивает:

this.$bus.$on('throw', ($event) => {
    console.log($event)  //shows 'Hi'
})