vue中的依賴注入provide/inject遇到的一個坑

在寫vue的時候常常會遇到一種狀況：可能一個參數在許多組件中會用到，或者是組件中的一個子組件須要用到父組件的父組件的某些參數。
那麼這個時候爲了不組件重複傳參，使用vue的依賴注入是個不錯的方法，直接在最外層組件設置一個provide，內部無論多少嵌套均可以直接取到最外層的參數。可是假如咱們須要的這個參數是須要請求後臺接口返回或者說須要計算得來的呢，我就遇到了這麼一個坑，先看代碼：

// 父組件
<template>
  <div>
    <child />
  </div>
</template>

<script>
import child from './child'
export default {
  provide() {
    return {
      testData: this.testData
    }
  },
  data () {
    return {
      testData: null
    }
  },
  created() {
    this.testData = {
      name: 'hello world'
    }
  },
  components: {
    child
  }
}
</script>

// 子組件 child
<template>
  <div>
    child
  </div>
</template>
<script>
export default {
  inject: ['testData'],
  created() {
    console.log(this.testData)
  }
}
</script>
複製代碼

這個時候神奇的事情發生了，子組件中 this.testData 的爲 null,可是我在父組件的created中已經賦值過了，若是是直接寫死那就沒有問題，可是需求不容許我寫死。不過不能阻止我使用依賴注入這個好東西，稍微改了一下父子組件的代碼， 以下：

// 父組件
export default {
  // 這裏改成提供一個方法
  provide() {
    return {
      getTestData: this.getTestData
    }
  },
  data () {
    return {
      testData: null
    }
  },
  methods: {
    // 方法中返回testData
    getTestData() {
      return this.testData
    }
  },
  components: {
    child
  },
  created() {
    this.testData = {
      name: 'hello'
    }
  }
}

// 子組件
export default {
  // 在子組件中注入這個方法
  inject: ['getTestData'],
  created() {
    console.log(this.getTestData())
  }
}
複製代碼

改成提供一個獲取testData的方法，在子組件中使用這個方法獲取父組件中testData的值便可。