JSFiddle - React, Tailwind, and code Playground

by Kingdaro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<template id="child-template">
  <div slot="form">
    <input v-model="msg">
    <button v-on:click="$emit('notify', msg)">Dispatch Event</button>
  </div>
</template>

<div id="events-example">
  <child @notify='notified'></child>
</div>

JavaScript

// register child, which dispatches an event with
// the current message
Vue.component('child', {
  template: '#child-template',
  data: function () {
    return { msg: 'hello' }
  }
})

var parent = new Vue({
  el: '#events-example',
  methods: {
  	notified (msg) {
    	alert(msg)
    }
  }
})