Emitting a value with an event

However, emitting just an event is not enough sometimes. In some cases, it's more useful to emit the event with a value. We can do that by using the second parameter in the $emit method, as follows:

$emit(<event>, <value>)

Then, when the parent is listening to the event, it can access the emitted event's value with $event in this format:

v-on:<event>="<event-handler> = $event"

If the event handler is a method, then the value will be the first parameter for that method in this format:

methods: {
  handleCompleted (<value>) { ... }
}

So, now, we can simply modify the previous app, as follows:

// Child
clicked () {
  this.$emit('completed', 'Task done')
}

// Parent
methods: {
  handleCompleted (value) {
    alert(value)
  }
}

Here, you can see that it is fun and easy to pass the data down or up between the parent and child components. But if you have an <input> element in your child component...