Vue中provide和inject 用法

1.概念

　　成對出現：provide和inject是成對出現的

　　作用：用於父組件向子孫組件傳遞數據

　　使用方法：provide在父組件中返回要傳給下級的數據，inject在需要使用這個數據的子輩組件或者孫輩等下級組件中注入數據。

　　使用場景：由於vue有$parent屬性可以讓子組件訪問父組件。但孫組件想要訪問祖先組件就比較困難。通過provide/inject可以輕松實現跨級訪問父組件的數據

2.簡單來說

　　provider/inject：簡單的來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量

　　需要注意的是這里不論子組件有多深，只要調用了inject那么就可以注入provider中的數據。而不是局限於只能從當前父組件的prop屬性來獲取數據。

父組件定義：

<script>
export default {
  // 父組件通過provide將自己的數據以對象形式傳出去
  provide(){
    return {
      parentValue:"我是父組件的值啊"
    }
  }
};
</script>

子孫組件接受方式：

<script>
export default {
  // inject:["parentValue"], // 使用一個注入的值作為數據入口：
  inject:{
    // 使用一個默認值使其變成可選項
    parentValue: { // 健名
      from: 'parentValue', // 來源
      default: 'parentValue' // 默認值
    }
  }
}
</script>

不論子組件有多深