前言:
在父子组件传递数据时，通常使用的是 props 和 emit。父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。
像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。
1、Vue2 中provide / inject 的使用
provide：是一个对象，里面是属性和值。
provide:{
info:“值”
}
如果 provide 需要使用 data 内的数据，访问组件实例 property 时，需要将 provide 转换为返回对象的函数。
provide(){
return{
info: this.msg
}
}
在 vue2 中 project / inject 应用：
//父组件export default{ provide:{ info:"提供数据" }}//子组件export default{ inject:['info'], mounted(){ console.log("接收数据：", this.info) // 接收数据：提供数据 }} provide 提供或发送数据， inject 接收数据。
2、Vue3 的 provide / inject 使用
在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。
provide 函数接收两个参数：
provide( name,value )
name：定义提供 property 的 name 。
value ：property 的值。
使用时：
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',"设置默认值") }}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>3、给 provide/inject 添加响应性
在vue3中给 provide/inject 添加响应性，使用 ref 或 reactive 。
实例3，如下
//父组件代码<template> <div> info：{{info}} <InjectCom ></InjectCom> </div></template><script>import InjectCom from "./InjectCom"import { provide,readonly,ref } from "vue"export default { setup(){ let info = ref("今天你学习了吗？") setTimeout(()=>{ info.value = "不找借口，立马学习" },2000) provide('info',info) return{ info } }, components:{ InjectCom }}</script>// InjectCom 子/孙组件代码<template> {{info}}</template><script>import { inject } from "vue"export default { setup(){ const info = inject('info') setTimeout(()=>{ info.value = "更新" },2000) return{ info } }}</script>上述示例，在父组件或子组件都会修改 info 的值。
provide / inject 类似于消息的订阅和发布，遵循 vue 当中的单项数据流，什么意思呢？就是数据在哪，修改只能在哪，不能在数据传递处修改数据，容易造成状态不可预测。
在订阅组件内修改值的时候，可以被正常修改，如果其他组件也使用该值的时候，状态容易造成混乱，所以需要在源头上规避问题。
readonly 只读函数，使用之前需要引入，如果给变量加上 readonly 属性，则该数据只能读取，无法改变，被修改时会发出警告，但不会改变值。
使用方法：
import { readonly } from "vue"let info = readonly('只读info值')setTimout(()=>{ info="更新info" //两秒后更新info的值},2000)运行两秒后，浏览器发出警告，提示 info 值不可修改。
所以我们就给provide发射出去的数据，添加一个只读属性，避免发射出去的数据被修改。在上面实例3的 provide 处添加 readonly 。
provide('info', readonly(info))在子组件修改值的时候，会有一个只读提醒。
所以在修改值的时候，还是需要在 provide 发布数据的组件内修改数据，在父组件内添加修改方法，同时也发布出去，在子组件处调用就可以了。如：
//发布let info = ref("今天你学习了吗？")const changeInfo = (val)=>{ info.value = val}provide('info',readonly(info))provide('changeInfo',changeInfo)//订阅const chang = inject('changeInfo')chang('冲向前端工程师')完整示例:
// 父组件代码<template> <div> info：{{info}} <InjectCom ></InjectCom> </div></template><script>import InjectCom from "./InjectCom"import { provide,readonly,ref } from "vue"export default { setup(){ let info = ref("今天你学习了吗？") const changeInfo = (val)=>{ info.value = val } provide('info',readonly(info)) provide('changeInfo',changeInfo) return{ info } }, components:{ InjectCom }}</script>//InjectCom 子组件代码<template> <div> <button @click="chang('冲向前端工程师')">更新值</button> </div></template><script>import { inject } from "vue"export default { setup(){ const info = inject('info') const chang = inject('changeInfo') return{ info, chang } }}</script>
