SOURCE

// 查看右下角 console 输出
Vue.component('level-one-component',{
  template: `<div><slot></slot></div>`,
  data(){
    return {
      msg: "msg"
    }
  },
  provide(){
    return {
      title: "level-one-component title",
    }
  },
});
Vue.component('level-two-component',{
  template: `<div><slot></slot></div>`,
});
Vue.component('level-three-component',{
  template: `<div>{{ title2 }}<slot></slot></div>`,
  inject: {
    title2: {
      // default vue@2.5+版本 才支持
      default: "level-three-component title"
    }
  }
});
Vue.component('level-four-component',{
  template: `<div>{{ title }}<slot></slot></div>`,
  // 如果命名冲突，会覆盖父辈组件的 provide
  // 在该对象中你可以使用 ES2015 Symbols 作为 key，
  // 但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
  provide(){
    // provide 已经可以访问 data 和 inject 数据
    // provide 执行与 beforeCreate 和 created 之间。
    console.log("provide",this.msg,this.title);
    return {
      title: "level-four-component title",
    }
  },
  inject: {
    title: {
      default: "level-four-component"
    }
  },
  beforeCreate(){
		console.log("beforeCreate");
  },
  created(){
		console.log("created");
  }
});
Vue.component('level-five-component',{
  template: `<div>{{ title }}<slot></slot></div>`,
  inject: ['title']
});

new Vue({
  el: '#root',
})

<script src="https://unpkg.com/vue"></script>

<div id="root">
  <level-one-component>
    <level-two-component>
      <level-three-component>
        <level-four-component>
          <level-five-component>
          </level-five-component>
        </level-four-component>
      </level-three-component>
    </level-two-component>
  </level-one-component>
</div>