События между родственными компонентами в Vue.js, зачем регистрировать их в $ root? - PullRequest
Новая
       30

События между родственными компонентами в Vue.js, зачем регистрировать их в $ root?

1 голос
/ 10 июня 2019

Я просто просматривал некоторый код Vue.js здесь и заметил некоторый код внутри модального компонента, который выглядит следующим образом: 

mounted () {
  this.$root.$on('habitica:update-challenge', (data) => {
    if (!data.challenge) return;
    this.cloning = false;
    this.$store.state.challengeOptions.workingChallenge = Object.assign({}, this.$store.state.challengeOptions.workingChallenge, data.challenge);
    this.$root.$emit('bv::show::modal', 'challenge-modal');
  });
}

Если вы переходите к строке в sКомпонент Sibling здесь , вы в основном видите компонент Sibling, вызывающий функцию edit(), которая в основном выглядит следующим образом: 

edit () {
  this.$root.$emit('habitica:update-challenge', {
    challenge: this.challenge,
  });
}

Так что, если я прав, событие регистрируется наthis.$root компонент внутри challengeModal, а затем находится внутри challenDetail компонента, используя this.$root.$emit?Правильна ли моя аналогия?

Несколько второстепенных вопросов: является ли challenge: this.challenge, полезной нагрузкой, отправляемой на this.$root, и challenge: this.challenge,, получаемой внутри this.$root.$on('habitica:update-challenge', (data) => { в форме аргумента, а именно data?

PS Я пришла из ReactJS / jQuery, поэтому просто пытаюсь обернуться вокруг событий Vue.

1 Ответ

1 голос
/ 11 июня 2019

Ваши предположения верны.

События Vue были заимствованы из AngularJS, API событий еще более изменен в Vue 2. Концепция похожа на DOM или другие реализации событий JavaScript:

Обратите внимание, что система событий Vue отличается от API EventTarget браузера.Хотя они работают аналогично, $ emit, $ on и $ off не являются псевдонимами для dispatchEvent, addEventListener и removeEventListener.

Братья и сестры должны взаимодействовать через общего родителя, $root экземпляр действует как глобальная шина событий,Прослушиватель событий регистрируется внутри одного компонента и запускается внутри другого.

...