JSFiddle - React, Tailwind, and code Playground

by Lianer

HTML

<div id="demo" v-cloak>
  <parent home="home">
    <child name="home">123</child>
    <child name="detail">456</child>
  </parent>
</div>

<script id="parent" type="text/html">
	<div class="parent">
    <slot></slot>
  </div>
</script>

<script id="child" type="text/html">
	<div class="child">
    <slot></slot>
  </div>
</script>

CSS

[v-cloak]{
  display: none;
}

JavaScript

Vue.component('parent', {
	props: ['home', 'value'],
	template: '#parent',
  data () {
  	return {
	    children: [],
      history: []
    }
  },
  methods: {
  	addChild (child) {
    	this.children.push(child)
    }
  },
  mounted () {
  	window.alert(this.children)
    window.alert(this.history)
  }
})

Vue.component('child', {
	props: ['name'],
	template: '#child',
	mounted () {
  	this.$parent.addChild(this)
  }
})

new Vue({
	el: '#demo'
})