Vue.js ⚡️ Eventos - Passando Argumentos - [vm.$emit]

[Vue.js]_event-passing-arguments.js

Vue.component('food', {
  template: '#food',
  props: ['name'],
  data: function() {
    return {
      votes: 0
    }
  },
  methods: {
    vote: function(event) {
      this.votes++
      this.$emit('voted', event.srcElement.textContent)
      /*
      	A função $emit tem como primeiro argumento o nome do evento,
        e os demais são parâmetros adicionais à função de callback.
      */
    }
  },
});

new Vue({
  el: '#app',
  data: {
    votes: 0,
    log: []
  },
  methods: {
    countVote: function(food) {
      this.votes++
      this.log.push(food + ' received a vote.')
    }
  }
});

[Vue.js]event-passing-arguments.html

<template id="food">
    <div>
        <h2> {{ votes }} </h2>
        <button @click="vote">{{ name }}</button>
    </div>
</template>

<div id="app">
    <h1> {{ votes }} </h1>
    <div>
        <food @voted="countVote" name="Cheeseburger"></food>
        <food @voted="countVote" name="Double Bacon Burger"></food>
        <food @voted="countVote" name="Rodeo Burger"></food>
    </div>
    <div>
        <h1>Log:</h1>
        <ul>
            <li v-for="vote in log"> {{ vote }} </li>
        </ul>
    </div>
</div>