基本使用方式：

const s = Symbol()

export default {
  provide: {
    foo: 'foo',
    [s]: 'bar'
  }
}

使用函数可以提供其组件中的状态：

export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  provide() {
    return {
      msg: this.msg
    }
  }
}

上面这个例子，供给的 msg 不是响应式的

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">