provide 和 inject 用法及原理

在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。

像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。
一、Vue2 的 provide / inject 使用

provide ：是一个对象，里面是属性和值。如：

provide:{  info:"值" }

如果 provide 需要使用 data 内的数据时，这样写就会报错。访问组件实例 property 时，需要将 provide 转换为返回对象的函数。

provide(){
 return{
  info: this.msg
 }
}

inject ：是一个字符串数组。如：

inject: [ 'info' ]

接收上边 provide 提供的 info 数据，也可以是一个对象，该对象包含 from 和 default 属性，from 是可用做的注入内容中搜索用的 key，default 属性是指定默认值。

在 vue2 中 project / inject 应用：

//父组件
export default{
 provide:{
  info:"提供数据"
 }
}
//子组件
export default{
 inject:['info'],
 mounted(){
     console.log("接收数据：", this.info) // 接收数据：提供数据
 }
} 

provide / inject 类似于消息的订阅和发布。provide 提供或发送数据， inject 接收数据。

二、Vue3 的 provide / inject 使用

在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。

provide 函数接收两个参数：

provide( name,value )

name：定义提供 property 的 name 。

value ：property 的值。

使用时：

?

1 2 3 4 5 6

import { provide } from "vue" export default {   setup(){     provide('info',"值")   } }

inject 函数有两个参数：

inject(name,default)

name：接收 provide 提供的属性名。

default：设置默认值，可以不写，是可选参数。

使用时：

import { inject } from "vue"
export default {
  setup(){
    inject('info',"设置默认值")
  }
}

完整实例1：provide/inject实例

//父组件代码
<script>
import { provide } from "vue"
export default {
setup(){
provide('info',"值")
  }
}
</script>

//子组件 代码
<template>
 {{info}}
</template>
<script>
import { inject } from "vue"
export default {
setup(){
const info = inject('info')
return{
info
    }
  }
}
</script>