JSFiddle - React, Tailwind, and code Playground

by BuiHiu

HTML

<div id="app">
  <provider>
    <child />
  </provider>
</div>

JavaScript

// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  template: `<div>Provider <slot /></div>`
  // ...
}

var Child = {
  inject: ['foo'],
  template: `<div>Child with injected value {{ foo }}</div>`,
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

new Vue({
  el: '#app',
 
  components: { Child, Provider }
})