关于组件之间使用provide和inject传值

1.在写项目的时候，由于组件封装的层次超过了两层，因而想起了用provide和inject传值的方式。provide和inject都是与data、methods、钩子函数同级,千万不要写错！！

基础用法如下：

父组件中：

provide() {
    return {
      parent: this.parent,
    }
  },

孙组件中：

provide应该是 一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。

---------------------------------------------------------------------------------------------------------------------------------

项目中实际运用到的地方：

父组件中发起请求，从后端获取到数据，将获取到的数据传递到孙组件中，父组件获取到数据赋值给变量

1.开始写法如下：

父组件中：

 

 孙组件中：

 孙组件中打开调试工具，我们可以发现inject和data中定义的变量都是一个空数组，究其原因，就是因为父组件中是异步获取到数据，当数据还没有获取到的时候，就已经通过provide传递到孙组件中，所以此时，我们需要将父组件中获取到的数据进行包装，再传递到孙组件中

2.经过包装之后

 父组件中：

父组件异步获取到数据，将数据进行简单的处理。如下：

 

 孙组件中：

此时在孙组件中，我们可以看到调试工具中，provide和inject接受到的是一个函数

 使用的时候，直接调用整个函数即可拿到想要的数据