JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<script src="https://npmcdn.com/[email protected]/dist/vue.js"></script>
<script id='parent-template' type='x-template'>
	<child @click.native="changeValue">
  	<template>
    	<input type="text" value="{{value}}">
    </template>
  </child>
</script>

<script id='child-template' type='x-template'>
	<div>
  	<slot></slot>
  </div>
</script>

<div id="app">
  <parent></parent>
</div>

JavaScript

Vue.component('parent', {
  template: '#parent-template',
  data: function() {
  	return {
    	value: 'my value'
    }
  },
  methods: {
  	changeValue: function() {
    	this.value = 'other value';
    }
  }
});

Vue.component('child', {
  template: '#child-template',
});

var app = new Vue({
  el: "#app",
  data: {}
});