JSFiddle - React, Tailwind, and code Playground

by Umesh Patil

HTML

<div id="app">
  {{count}}
  <child-component :href="url"></child-component>
</div>

JavaScript

var eventHub = new Vue();
Vue.component('child-component', {
  template: `<div>
  						<button @click='clickEvent'>Click me to emit an event on the hub!</button>
              <a :href="href" target="_blank">Link</a>
              <a :href="href" target="_blank">Link</a>
  </div>`,
  
  methods: {
    clickEvent: function() {
      // We emit the event on the event hub
      eventHub.$emit('clicked');
    }
  },
  props:['href'],
  data(){
  	return{
    	url: "https://www.google.co.in"
    }
  }
  
});

new Vue({
  el: '#app',
  methods: {
    clickHandler: function() {
      this.count++;
      //alert ("count");
    }
  },
  props:['href'],
  created: function() {
    // We listen for the event on the eventHub
    eventHub.$on('clicked', this.clickHandler);
  },
  data: function() {
    return {
      count: 0,
			url: "www.facebook.com"
    };
  }
});