Vue emits

up:: Vue Component Events | Vue.js

Basics

Component (in template):

<!-- MyComponent -->
<button @click="$emit('someEvent')">click me</button>

Parent (template):

 <MyComponent @some-event="callback" />

Parameters

Component

<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

Parent

<MyButton @increase-by="increaseCount" />

The parent points towards a callback function. It doesn’t print the return value, like it would be if we called the function with increaseCount.

This way, the value is passed as the first parameter of that method:

function increaseCount(n) {
  count.value += n
}