JSFiddle - React, Tailwind, and code Playground

by Slava Slava

HTML

<div id="root">
  <parent-component :comp="{name: 'test', comp: Child}"></parent-component>
</div>

CSS

.c-parent {
  border: 1px solid red;
  padding: 10px;
}

Babel + JSX

let Child = Vue.extend({
  data() {
    return {
    	msg: 'CHILDREN'
    }
  },
  template: '<div class="c-child">component {{msg}}</div>'
})


let Parent = Vue.extend({
	props: {
  	comp: {
    	default: ''
    }
  },
  data() {
    return {
    	msg: 'PARENT'
    }
  },
  template: '<div class="c-parent">from component- {{msg}}<br><component :is.sync="comp.name"/></div>',
  
  ready() {
  	console.log(this.comp.comp);
  	Vue.component(this.comp.name, this.comp.comp)
  }
})

// register
Vue.component('parent-component', Parent)

// create a root instance
new Vue({
  el: '#root'
})