JSFiddle - React, Tailwind, and code Playground

by robert chang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.4/vue.js"></script>
<div id="app">
    <div>data from child comp event: {{ edatafromchild }}</div>
    <soncom msg="Foo" @message="displayChildMsg"></soncom>
    <soncom msg="Bar" @message="displayChildMsg"></soncom>
    <soncom msg="Baz" @message="displayChildMsg"></soncom>
</div>

Babel + JSX

const Pcom = {
	template: '<div> msg from child {{ childEventData }}<slot></slot></div>'
}
const Soncom = {
  props: ['msg']  ,
  template: `<div>
  	<button @click="send">Send Message: {{ msg }}</button>
    <slot></slot>
  </div>`,
  methods: {
  	send () {
    	this.$emit('message2', this.msg)
    }
  }
}

new Vue({
	el: '#app',
  data: function(){
    return {
       edatafromchild: ''
    }
  },
  methods: {
     displayChildMsg: function(edata){
        this.edatafromchild = edata
     }
  },
  components: {
  Pcom,
    Soncom
  }
})