Зачем передавать event в компонент Vue?

Question

[beduin01]

Вот исходник https://jsfiddle.net/tagdjyrL/

Мне не понятен следующий момент:

<modal-notifications :aa="isActive" :message="message" @my-event="myEvent"></modal-notifications>

:aa="isActive" - тут все понятно, мы передаем в компонент props который потом определит открыто ли модальное окно в компоненте или нет.
Но зачем передавать: @my-event="myEvent" ?

Я же делаю из потомка this.$emit('my-event', this.isActive) которое слушает родитель. А эмит выше вроде бы не нужен, но без него не работает.

И еще вопрос. Что делает:

myEvent: function(isActive) {
  this.isActive = isActive
}

Почему оно должно что-то принимать? Можно же просто значение из data взять. И возвращает ли что-то?

Answer 1

[0xD34F]

зачем передавать: @my-event="myEvent" ?

Правильнее говорить не "передавать", а "назначать обработчик события". Чисто технически - да, происходит передача функции в экземпляр компонента. Но поскольку способ передачи указывает на специфический способ использования этой функции, давайте будем придерживаться соответствующей терминологии.

Итак, зачем назначать обработчик события? Вообще - это вам виднее, надо или не надо обрабатывать событие, и если надо, то как именно. А в данном конкретном случае - чтобы обновить значение свойства родительского компонента, отвечающего за состояние диалогового окна.

Кстати,в явном виде делать это совсем не обязательно.

Первый вариант - можно использовать модификатор sync при привязке значения параметра aa:

<modal-notifications :aa.sync="isActive" :message="message"></modal-notifications>

Метод закрытия в компоненте окна в этом случае станет выглядеть так:

closeModalWindow() {
  this.$emit('update:aa', false);
},

Второй вариант - управлять состоянием окна посредством директивы v-model. Надо будет заменить имя параметра с aa на value (ну или настроить model):

props: ['aa', 'message'], ---> props: [ 'value', 'message' ],
:class="{'is-active': aa}" ---> :class="{ 'is-active': value }"

Переписать метод закрытия окна:

closeModalWindow() {
  this.$emit('input', false);
},

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

<modal-notifications v-model="isActive" :message="message"></modal-notifications>

Я же делаю из потомка this.$emit('my-event', this.isActive) которое слушает родитель.

Никто ничего просто так не "слушает". Чтобы "слушать", надо назначить обработчик соответствующего события. Что и происходит посредством @my-event="myEvent".

эмит выше вроде бы не нужен, но без него не работает

Чё? Какой ещё "эмит"? Нет "выше" никакого "эмита". Вы в родителе событие обрабатываете, а не порождаете.

И еще вопрос. Что делает:

myEvent: function(isActive) {
  this.isActive = isActive
}

Почему оно должно что-то принимать? Можно же просто значение из data взять.

"Значение из data" брать бессмысленно - это и есть this.isActive. Который вам обновить надо. Обновить значением, которое присылает диалоговое окно. Значением, которое передаётся в (т.е., которое принимает) обработчик события.

Answer 2

[Evgeniy S]

Но зачем передавать: @my-event="myEvent" ?

ты как бы говоришь "слушаю событие my-event и если оно случится (вызывая $emit снизу), то нужно запустить обработчик-функцию myEvent"

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

Comments

[beduin01]

Мне просто не понятно, но разве одного :aa="isActive" не хватило бы чтобы передать потомку новое состояние?

[Evgeniy S]

Да, именно таким способом ты и передашь потомку (вниз) новое состояние. НО как потомок скажет родителю что нужно новое состояние ???? только через $emit - кидаешь наверх новое состояние.
В потомке this.$emit('my-event', this.isActive) но тут isActive - это внутреннее состояние потомка, а не родителя!! это свойство может вообще по другому называться и тогда будет this.$emit('my-event', this.myActiveState)
- в любом случае ты посылаешь наверх булевое значение, которое родитель поймает и запишет в свою внутреннюю переменную isActive (которое сразу попадает к потомку через props :aa="isActive")