vue 組件傳值provide與inject

vue 組件傳值provide和inject

應用場景

　　當組件嵌套的層級過多時，通過prop將父組件的屬性層層傳遞給后代組件，明顯是繁瑣而又低效的，vue提供了provide和inject，能夠將父組件中的屬性直接讓所有后代組件訪問到

與$parent相比用什么好處

　　1.不用暴露整個parent組件實例對象

　　2.可以滲透到多個層級的組件，只要是后代組件都可以獲取，而$parent只能是直系后代獲取，多個層級后代組件就只能$parent.$parent...

一些問題

　　在子組件中vue仍然像props一樣不允許子組件直接修改inject中的項的值

代碼示例

　　父級中的provide定義語法

  //第一種，直接以對象的方式定義
  //優點：方便
  //缺點：無法訪問當前的this
  //適用場景:傳遞靜態數據
  provide: {
    test: "測試 定義方式1 以對象的形式定義",
  },
  //第二種，使用工廠函數定義
  //優點：能夠直接訪問當前this可以傳遞動態數據
  //適用場景: 適用與絕大多數場景，除非你傳遞的數據全部都是靜態數據
  provide() {
    return {
      test: this.test,
    };
  },
  data() {
    return {
      test: "test",
    };
  },

　　子組件使用inject接收

 

<template>
  <div class="index">
    <!-- 像使用data中的熟悉一樣使用inject屬性 -->
    <div class="">我是children==={{ test }}</div>
    <subw></subw>
  </div>
</template>

<script>
import subw from "./sub.vue";
export default {
  components: { subw },
  //第一種方式:直接使用數組形式接收
  //缺點：不能定義默認值，inject中定義的字段，父組件provide中就必須要定義，否則就會報錯
  inject: ["test"],
  //第二種：使用對象的方式
  //優點：能夠定義默認屬性，定義默認屬性之后，即便父組件中沒有在provide定義對應的屬性,vue也會認為它是合法的，在使用時會自動使用默認屬性
  inject: {
    test: {
      //你可以直接這樣定義一個基本類型的值作為默認值
      default: "parent prov",
      //如果你想使用引用類型的值作為默認值的話，那么你就要定義一個工廠函數來返回他
      default: () => {
        //一個數組作為默認值
        return new Array();
        //一個object作為默認值
        return new Object();
        //一個方法作為默認值
        return function () {};
      },
      //如果父組件的provide定義的屬性字段為test，而子組件中data存在一個test字段，
      //此時子組件再將inject的接收字段定義為test的話。調用this.test就會出現沖突，所以子組件inject中可以定義與provide中不同的字段來接收，只需要將from接收來源指定為provide中的目標字段即可
      from: "test2",
    },
  },
  created() {
    //  像使用data中的熟悉一樣使用inject屬性
    console.log(this.test);
  },
};
</script>