import { inject } from “vue”
export default {
setup(){
inject(‘info’,“设置默认值”)
}
}
完整实例1：provide/inject实例
//父组件代码
//子组件 代码
{{info}}
三、添加响应性
为了给 provide/inject 添加响应性，使用 ref 或 reactive 。
完整实例2：provide/inject 响应式
//父组件代码
info：{{info}}
// InjectCom 子组件代码
{{info}}
上述示例，在父组件或子组件都会修改 info 的值。
provide / inject 类似于消息的订阅和发布，遵循 vue 当中的单项数据流，什么意思呢？就是数据在哪，修改只能在哪，不能在数据传递处修改数据，容易造成状态不可预测。
在订阅组件内修改值的时候，可以被正常修改，如果其他组件也使用该值的时候，状态容易造成混乱，所以需要在源头上规避问题。
readonly 只读函数，使用之前需要引入，如果给变量加上 readonly 属性，则该数据只能读取，无法改变，被修改时会发出警告，但不会改变值。
使用方法：
import { readonly } from “vue”
let info = readonly(‘只读info值’)
setTimout(()=>{
info=“更新info” //两秒后更新info的值
},2000)
运行两秒后，浏览器发出警告，提示 info 值不可修改。
所以我们就给provide发射出去的数据，添加一个只读属性，避免发射出去的数据被修改。
完整实例2的 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(‘冲向前端工程师’)
完整示例3：修改数据
// 父组件代码
info：{{info}}
//InjectCom 子组件代码
<button @click=“chang(‘冲向前端工程师’)”>更新值
