JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div id="app">
  <parent></parent>
</div>
<template id="parent-component">
  <div>
    <h1>Parent</h1>
    <inherited-child :id="id" v-bind="$attrs" @click="sayHello"></inherited-child>

    <noninherited-child :id="id" v-bind="$attrs" @click="sayHello"></noninherited-child>
  </div>
</template>

<template id="child-component">
  <div v-on="$listeners">
    <h1>Child</h1> 
    <div>
      $attrs -> {{$attrs}}
    </div>
  </div>
</template>
<script src="https://unpkg.com/[email protected]"></script>

CSS

#Hello {
  color: white;
  background-color: tomato;
  border-radius: 10px;
  padding: 10px;
}

JavaScript

new Vue({
  el: '#app',
  components: {
    'parent': {
      name: 'parent',
      template: '#parent-component',
      data: function() {
        return {
          id: 'Hello'
        }
      },
      methods: {
        sayHello: function () {
          window.alert('hello!')
        }
			},
      components: {
        'inherited-child': {
          name: 'inherited-child',
          template: '#child-component'
        },
        'noninherited-child': {
          inheritAttrs: false,
          name: 'noninherited-child',
          template: '#child-component'
        }
      }
    }
  }
})