vue 3 学习笔记 (八)——provide 和 inject 用法及原理

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(‘冲向前端工程师’)”>更新值