provide-inject-basic-example

HTML

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

<div id="app">
	<child></child>
</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 }
})