JSFiddle - React, Tailwind, and code Playground

by Mani Jagadeesan

HTML

<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="app">
	<div class="container">
	<h3 class="text-muted">Demo</h3>
		<component 
      :is="currentView" 
			transition="fade" 
			transition-mode="out-in">
		</component>
	</div>
</div>

<template id="template-a">
	<div>
		<h4>Component One</h4>
    <button class="btn btn-default" @click="onClick">To component two</button>
	</div>
</template>


<template id="template-b">
	<div>
		<h4>Component Two</h4>
    <button class="btn btn-default" @click="onClick">To component one</button>
	</div>
</template>

CSS

.fade-transition { transition: opacity 0.4s ease; }
.fade-enter, .fade-leave { opacity: 0; }
button:active, button:focus { outline: none !important;}

Babel + JSX

Vue.config.debug = true;
Vue.config.devtools = false;

var bus = new Vue();

Vue.component('component-one', {
	template: '#template-a',
	methods: {
		onClick() {
			const someObj = {
				foo: "foo",
				bar: "bar"
			}
			console.log("Sending event to component-two");
			bus.$emit('selected', someObj);
      vm.$nextTick(function() {
				vm.currentView ='component-two';
      });
		}
	}
});

//Any hint??
/*vm.$on('selected', (someObj) => {
	this.logThat(someObj)
})*/

Vue.component('component-two', {
	template: '#template-b',
	methods: {
		onClick() {
			vm.currentView ='component-one';
		},
    logThat(someObj) {
    	console.log(someObj);
    }
	},
  created: function() {
     console.log("Created component-two, listening for 'selected' event");
     bus.$on('selected', this.logThat);
  }
})

const vm = new Vue({
	data: {
		currentView: 'component-one'
	}
}).$mount('#app');

/*vm.$on('selected', (event) => {
	console.log(event)
	this.foo(event)
})*/