Vue.js ⚡️ Event Bus

[Vue.js]_event-bus.js

var bus = new Vue();

Vue.component('food', {
  template: '#food',
  props: ['name'],
  data: function() {
    return {
      votes: 0
    }
  },
  methods: {
    vote: function(event) {
      // instead of using this.name
      // we can access event's element's text
      bus.$emit('voted', event.srcElement.textContent)
      this.votes++
    },
    reset: function() {
      this.votes = 0
    }
  },
  created() {
    bus.$on('reset', this.reset)
  }
});

new Vue({
  el: '#app',
  data: {
    votes: {
      count: 0,
      log: []
    }
  },
  methods:
  {
    countVote: function(food) {
      this.votes.count++
      this.votes.log.push(food + ' received a vote.')
    },
    reset: function() {
      this.votes = {
        count: 0,
        log: []
      }
      bus.$emit('reset')
    }
  },
  created() {
    bus.$on('voted', this.countVote)
  }
});

[Vue.js]event-bus.html

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

<div id="app">
    <h1>Food Battle</h1>
    <h1> {{ votes.count }} </h1>
    <button @click="reset">Reset votes</button> 
    <hr>
    <div>
        <food name="Cheeseburger"></food>
        <food name="Double Bacon Burger"></food>
        <food name="Whooper"></food>
    </div>
    <hr>
    <h1>Log:</h1>
    <ul>
        <li v-for="vote in votes.log"> {{ vote }} </li>
    </ul>
</div>