在写vue的时候经常会遇到一种情况：可能一个参数在许多组件中会用到，或者是组件中的一个子组件需要用到父组件的父组件的某些参数。
那么这个时候为了避免组件重复传参，使用vue的依赖注入是个不错的方法，直接在最外层组件设置一个provide，内部不管多少嵌套都可以直接取到最外层的参数。但是假如我们需要的这个参数是需要请求后台接口返回或者说需要计算得来的呢，我就遇到了这么一个坑，先看代码：
————————————————
parent父页面：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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中已经赋值过了，如果是直接写死那就没有问题，但是需求不允许我写死。不过不能阻止我使用依赖注入这个好东西，稍微改了一下父子组件的代码， 如下：
1 2 3 4 5 6 | // 父组件 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的值即可