一、用法：

• provide:用在祖先元件中；值為一個物件或返回一個物件的函式；
• inject:用在子孫元件中；值為provide物件中的key陣列或一個物件，該物件的key值為本地繫結名稱,值為provide物件中的key或一個物件：{from:’provide物件中的key’,default:’預設值，用於降級處理’}

二、程式碼：

<template>
  <div class="menu">
    <root-menu>
      <child-menu>
         <sun-menu></sun-menu
 
>
      </child-menu>
    </root-menu>
  </div>
</template>

<script>
import Vue from 'vue'

Vue.component('RootMenu',{
  provide:{
    a:'RootMenu',
    b:{name:'RootMenu'}
  },
  render: function (createElement) {
    return createElement(
      'div',   // tag name 標籤名稱
 

      this.$slots.default // 子元件中的陣列
    )
  },
})

Vue.component('ChildMenu',{
  inject:{
    localName:'a'
  },
  provide:{
    c:'ChildMenu'
  },
  render: function (createElement) {
    return createElement(
      'div',   // tag name 標籤名稱
      [
        this.getLocalName(),
        createElement('a'
 
,this.$slots.default)
      ]
    )
  },
  methods:{
    getLocalName(){
      return this.localName + '子選單';
    }
  }
})

Vue.component('SunMenu',{
  inject:['b','c'],
  render: function (createElement) {
    return createElement(
      'div',   // tag name 標籤名稱
      [
        this.getLocalName(),
        createElement('a',this.$slots.default)
      ]
    )
  },
  methods:{
    getLocalName(){
      return this.b.name + '孫選單'+this.c;
    }
  }
})

export default {
 data(){
   return {};
 }
}
</script>

三、結果:

四、說明：

• 元件中的inject可以包括各個上級元件中的provide內容
• 一中的“本地繫結名稱”是指可以自定義名稱