理論

這是Vue提供的一組允許祖先組件向其所有子孫后代注入一個依賴的選項，不管組件層次有多深，子孫后端使用inject都能使用到祖先組件provide提供的對象或?qū)ο蟮暮瘮?shù)，官方是如下定義的：

這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。

provide 選項應該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的屬性。在該對象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環(huán)境下可工作。
inject 選項應該是：

• 一個字符串數(shù)組，或
• 一個對象，對象的 key 是本地的綁定名，value 是：
• 在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)，或
• 一個對象，該對象的：

1. from 屬性是在可用的注入內(nèi)容中搜索用的 key (字符串或 -- Symbol)
2. default 屬性是降級情況下使用的 value

那么重點來了，在項目中我們?nèi)绾问褂眠@一對選項呢？

實踐：

祖先組件：

<template>
    <div>
        我是祖先
    </div>
</template>

<script>
export default {
  name: 'my-parent',
  provide() {
    return {
      getParent: this.parent    // 為子孫后代提供parent
    };
  },
  data() {
    return {
      parent: {
        name: '我是你祖宗'
      }
    };
  }
}
</script>

子孫后代組件：

<template>
    <my-parent>
        我是子孫輩，
        我祖宗的名字：{{ getParent.name  }}
    </my-parent>
</template>

<script>
export default {
  inject: ['getParent'],  // 獲取祖先提供的getParent對象
  data() {
    return {};
  }
}
</script>