在 vue.js 中从 html 调用 function 时花括号

Question

when calling function, for example on click it doesn't matter if I write curly braces or not. It works in both scenarios. But I made a function, which fires custom event from a child. then I await it in a parent component and fire my function (which is in parent), to update state. I noticed when I write curly braces on that function, vue returns an error. why is that happening? (I'm new to vue.js:) ).

function in a child component, which is invoked on click:

  toggleFavorite: function () {
          this.$emit("toggle-favorite", this.id);
        }

A child component rendered inside a parent

<friend-contact
      v-for="friend in friends"
      :data="friend"
      :key="friend.id"
      @toggle-favorite="toggleFavorite"> // if i write 'toggleFavorite()' here, I am 
                                         // geting an error
                                         
    </friend-contact>

A function which is fired on custom event

 toggleFavorite: function (id) {
      let friendToUpdate = this.friends.find((el) => el.id === id);
      friendToUpdate.favorite = !friendToUpdate.favorite;
    }

Answer 1

An event doesn't matter, what matters here is whether a parameter is used in event handler or not.

@toggle-favorite="toggleFavorite" results in toggleFavorite being used as event handler.

@toggle-favorite="toggleFavorite()" results in toggleFavorite() expression being evaluated on event, with id parameter being undefined .

There is $event magic value that represents event parameter in event handler. In order to match the first syntax, it should be @toggle-favorite="toggleFavorite($event)" .