JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  {{legacy}}
  <child-component
    v-bind:legacy="legacy"
  ></child-component>
</div>

<template id="child-component">
  <div>
    <p>{{legacy}}</p>
    <grand-child-component
      v-bind:legacy="legacy"
    ></grand-child-component>
  </div>
</template>

<template id="grand-child-component">
  <div>
    <p>{{legacy}}</p>
  </div>
</template>

JavaScript

var GrandChildComponent = Vue.component('grand-child-component', {
	template: '#grand-child-component',
  props: ['legacy']
})

var ChildComponent = Vue.component('child-component', {
	template: '#child-component',
  props: ['legacy'],
  components: {
  	GrandChildComponent
	}
});


new Vue({
	el: '#app',
  data: function () {
  	return {
	    legacy: 'ㅎㅎㅎ'  	
		}	
	},
  components: {
  	ChildComponentㄷ
	}
})