provide 与 inject 的使用

简单理解

1.简单理解
　provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

概念解析

成对出现：provide和inject是成对出现的

作用：用于父组件向子孙组件传递数据

使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

代码解释

写法一

//父组件
provide: {
   user: 'John Doe'
 }
 --------------------
//子组件
inject: ['user']
//使用
console.log（this.user）

缺点：如果我们尝试在此处提供一些组件实例 property，则这将不起作用，

 provide: {
    todoLength: this.todos.length // 将会导致错误 'Cannot read property 'length' of undefined`
  },

写法二

 provide() {
    return {
      todoLength: this.todos.length
    }
  },

缺点：数据不会响应变化

推荐写法 ：写法三
在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 时来定义每个 property。

provide 函数允许你通过两个参数定义 property：

property 的 name ( 类型)
property 的 value

//父组件
import { provide } from 'vue'
export default {
  setup() {
    provide('location', 'North Pole')//location 键（标识符）-- North Pole //值 
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}
// 子组件