У меня только что был момент эврики. Хотя этот блог может быть коротким, он может сэкономить вам огромное количество времени. Вы когда-нибудь работали над компонентом или страницей в Vue, а затем понимали, что вам нужно изменить состояние другого компонента, используя метод этого компонента? Если вы не храните эти данные в Vuex и не используете мутации Vuex, доступ к этим методам может быть затруднен без сверления свойств (по сути, перемещение состояния на общий родительский компонент/страницу с последующей отправкой свойств/методов каждому дочернему компоненту).

Допустим, у вас есть компонент A и компонент B, у которых нет общего родительского компонента, кроме основного родительского компонента вашего приложения. Если компонент B хочет использовать метод, определенный в компоненте A, нам нужно будет управлять состоянием в конечном родительском элементе или в Vuex. Это можно легко сделать. Однако часто вы обновляете/отлаживаете существующие компоненты, которые не используют Vuex для управления своим состоянием. В этом случае, что нам делать? Переписать весь наш код? Вместо этого компонент B может косвенно вызвать метод, определенный в компоненте A, с помощью прослушивателя событий в компоненте A. Когда компонент A обнаруживает событие, компонент A может инициировать событие.

  1. Компонент А показан ниже. компонент A имеет локальное состояние со счетчиком: 1. У него есть метод под названием «incrementCount». В хуке жизненного цикла mount() мы пишем прослушиватель событий в корне, который прослушивает пользовательское событие под названием «incrementCountEvent». Когда компонент A слышит это пользовательское событие, он запускает incrementCount.
export default {
  data(){
    return {
      count: 1
    }
  },
  methods: {
      incrementCount() {
          this.count++
      }
  },
  mounted(){
    const thisInstance = this
    this.$root.$on('incrementCountEvent', function(){
      thisInstance.incrementCount()
    })
  }
}

2. Компонент B должен «генерировать» наше пользовательское событие под названием «incrementCountEvent». Когда компонент A обнаруживает событие, он запускает incrementCount().

this.$root.$emit('incrementCountEvent')

Обратите внимание: я до сих пор не нашел эффективного способа для компонента B получить доступ к локальному состоянию компонента A. Если у кого-то есть какие-либо предложения, пожалуйста, прокомментируйте.