Why pass an event to a Vue component?

Question

Vue.js

Here is the source https://jsfiddle.net/tagdjyrL/

The following point is not clear to me:

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

:aa="isActive"- everything is clear here, we pass props to the component, which will then determine whether the modal window is open in the component or not.
But why pass: @my-event="myEvent"?

I do from the descendant this.$emit('my-event', this.isActive)which the parent listens. And the emit above does not seem to be needed, but without it it does not work.

And another question. What is he doing:

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

Why should it accept anything? You can just take the value from data. And does it return something?

Answer 1

why pass: @my-event="myEvent"?

It is more correct to say not "pass", but "assign an event handler". Purely technically - yes, there is a transfer of a function to a component instance. But since the passing method indicates a specific way to use this function, let's stick to the appropriate terminology.
So why assign an event handler? In general, you know better whether it is necessary or not to process the event, and if necessary, how exactly. And in this particular case - to update the value of the property of the parent component responsible for the state of the dialog box.

By the way, you don't have to do it explicitly.

Первый вариант - можно использовать модификатор 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>

I do from the descendant this.$emit('my-event', this.isActive)which the parent listens.

No one just "listens" for anything. To "listen", you need to assign an appropriate event handler. What happens through @my-event="myEvent".

the emit above doesn't seem to be needed, but it doesn't work without it

What? What else "emit"? There is no "above" no "emit". You process an event in the parent, but do not generate.

And another question. What is he doing:

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

Why should it accept anything? You can just take the value from data.

"Value from data" is meaningless to take - this is this.isActive. which you need to update. Update with the value that the dialog box sends. The value that is passed to (i.e., received by) the event handler.