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的值便可。