Global Event Bus

Creating Global Event Bus using Vue.

HTML

<div id="app1" style="height:100px;width:200px;border:2px dotted green;padding:20px;float:left">
  <span>Component 1</span>
  <h1>{{title}}</h1>
</div>

<div id="app2" style="height:100px;width:200px;border:2px dotted green;padding:20px;float:right">
  <span>Component 2</span><br/><br/>
  <input v-model="title"/><button @click="updateTitle()">
  Update Title for Component 1
  </button>
</div>

JavaScript

// Creating Global Event Bus
var EventBus = new Vue();

var app1 = new Vue({
  el: '#app1',
  data: {
    title: 'This is Title'
  },
  created: function() {
  	var this_1 = this;
    EventBus.$on('updateTitle', function(value) {
			this_1.updateTitle(value);
    })
  },
  methods: {
    updateTitle: function(value) {
			this.title = value;
    }
  }
});

var app2 = new Vue({
  el: '#app2',
  data: {
    title: 'This is Title'
  },
  methods:{
  updateTitle:function(){
   EventBus.$emit('updateTitle',this.title);
  }
  }
});