JSFiddle - React, Tailwind, and code Playground

by ikbelkirasan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<template id="user">
  <div>
    <user-item ref="details"></user-item>
    <permissions :details="$refs.details"></permissions>
  </div>
</template>

<template id="user-item">
  <div>
    <h2>{{userItem}}</h2>
  </div>
</template>

<template id="permissions">
  <div>
    <h1>
      User permissions.
    </h1>
    <div>
      {{userDetails}}
    </div>
  </div>
</template>

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

JavaScript

Vue.component('user', {
	template: '#user'
})

Vue.component('user-item', {
  template: '#user-item',  
  data() {
  	return {
    	userItem: 'I am a user item',
    }
  	
  }
})

Vue.component('permissions', {
	template: '#permissions',
  props: {
  	details: Object
  },
  data() {
  	return {
    	userDetails: null,
    }
  },
  watch: {
  	details(d) {
    	this.userDetails = d
    }
  }
})

window.vm = new Vue({
	el: '#app',
})