Vue 3 - provide/inject

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <div>
    {{ name }}
  </div>
  <my-child></my-child>
</div>

JavaScript

const MyChild = {
  template: `<div>{{ name }}</div>`,
  inject: ['name'],
  
  mounted () {
    console.log(this)
  }
}

const app = Vue.createApp({
  components: {
    MyChild
  },

  inject: ['name'],

  provide: {
    name: 'May'
  }
})

app.provide('name', 'Joy')

app.mount('#app')