避坑18_Vue祖孙组件通过provide/inject异步传值，孙组件拿不到数据

一、问题

简化代码如下图所示：

二、原因和解决方法

• 因为在父组件异步获取数据前，tableData的空值就已传给了孙组件（详情查看父子组件生命周期执行顺序，其次异步调用在最后执行）
• 在异步调用结束后，又因为provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

说人话就是如果你把对象都改了那这个改动就追踪不到了，如果你就改了个对象属性那这种响应就能追踪到。以下是具体的代码分析。

解决思路： 将实际想获取的数组包裹在对象中作为对象的属性传递，也就是tableData.list，将整个tableData传过去，tableData.list的改变可以被响应。

// parent.vue
data () {
    tableData: {
        list: []
    }
},
provide () {
    return {
        tableData: this.tableData
    }
},
methods:{
    getTableData(){
      axios.get("url")
        .then((res) => {
          this.tableData.list = res.data.tableData;
          console.log("我是爷组件：", this.tableData.list);
        });
    },
  }

// child.vue
...
inject: ['taleData']
...
<el-table :data="tableData.list">