provide-inject-basic-example

by Rahul Kadyan

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

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

JavaScript

const Provider = {
	provide: {
  	foo: 'bar'
  },
  
  template: `<div><slot><slot></div>`
}

const Child = {
	inject: ['foo'],
  
  template: `<div>{{ foo }} injected. <slot><slot></div>`,
}

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