provide-inject-reactive-example

by Rahul Kadyan

HTML

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

<div id="app">
  
  <div>
    <input v-model="bar">
  </div> <br>
  
  <child></child>
  
</div>

JavaScript

const Child = {
	inject: ['foo'],

	template: `<div>{{ foo.bar }}</div>`,
}

new Vue({
	el: '#app',

  provide () {
    const foo = {}
    Object.defineProperty(foo, 'bar', {
       enumerable: true,
       get: () => this.bar,
    })
    return { foo }
  },

  data: () => ({ bar: 'baz' }),
  
  components: { Child }
})