Vue.js ⚡️ Eventos - Comunicação entre Pai e Filho

[Vue.js]_event-communication-between-father-son.js

Vue.component('food', {
  template: '#food',
  props: ['name'],
  methods: {
    vote: function() {
      this.$emit('voted')
    }
  },
});

new Vue({
  el: "#app",
  data: {
    votes: 0
  },
  methods: {
    countVote: function() {
      this.votes++
    }
  }
});

[Vue.js]event-communication-between-father-son.html

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

<div id="app">
    <div>
        <h1> {{ votes }} </h1>
        <food @voted="countVote" name="Cheeseburger"></food>
        <!--
            @voted="countVote" significa que quando o componente filho emitir o evento voted,
            o método countVote será executado.
        -->
    </div>
<pre>
{{$data}}
</pre>
</div>