provide / inject 类似于消息的订阅和发布。provide 提供或发送数据, inject 接收数据。
当我们需要从父组件向子组件传递数据时,我们使用 props。
而一些深度嵌套的组件,深层的子组件只需要父组件的部分内容。
若仍然将 prop 沿着组件链逐级传递下去的话,可能会很麻烦。
VUE提供了provide 和 inject来解决了这个问题。
无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。
父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据。
这个比 react 的 createContext 和 useContext 使用简单!也好理解些!当然熟悉react的,还可以参考:https://github.com/zephraph/vue-context-api
父组件
export?default?{
??name:?"provide",
??data()?{return?{host:'zhoulujun.cn'}},
??components:?{
????inject,
??},
??provide:?{
????site:?"zhoulujun.cn",
??},
};
子组件使用
export?default?{
??name:?"inject",
??inject:?["showName"],
};
如果 provide 需要使用 data 内的数据时,需要将 provide 转换为返回对象的函数。
export?default?{
??name:?"provide",
??data()?{return?{host:'zhoulujun.cn'}},
??components:?{
????inject,
??},
??provide(){return{site:this.host}},
};
具体参看:https://v2.vuejs.org/v2/api/#provide-inject
vue3用方法太多,这里具体看官方案例
具体参看:https://vuejs.org/guide/components/provide-inject.html
父组件
import?{?provide?}?from?'vue'
export?default?{
??setup(){
????let?site?=?ref("zhoulujun.cn")
????provide('site',site)
??}
}
子组件
import?{?inject?}?from?'vue'
export?default?{
??setup(){
????const?site?=?inject('site')
????return{
??????site
????}
??}
}
上述示例,在父组件或子组件都会修改 info 的值。
provide / inject 类似于消息的订阅和发布,遵循 vue 当中的单项数据流,什么意思呢?就是数据在哪,修改只能在哪,不能在数据传递处修改数据,容易造成状态不可预测。
在订阅组件内修改值的时候,可以被正常修改,如果其他组件也使用该值的时候,状态容易造成混乱,所以需要在源头上规避问题。
readonly 只读函数,使用之前需要引入,如果给变量加上 readonly 属性,则该数据只能读取,无法改变,被修改时会发出警告,但不会改变值。
//发布
let?info?=?ref("今天你学习了吗?")
const?changeInfo?=?(val)=>{
?info.value?=?val
}
provide('info',readonly(info))
provide('changeInfo',changeInfo)
//订阅
const?info?=?inject('info')
const?chang?=?inject('changeInfo')
chang('冲向前端工程师')
所以我们就给provide发射出去的数据,添加一个只读属性,避免发射出去的数据被修改。
参考链接:
react的createContext及useContext 和 vue3的 provide 及 inject https://blog.csdn.net/skyblacktoday/article/details/124044886
vue 3 学习笔记 (八)——provide 和 inject 用法及原理 https://juejin.cn/post/7034679042540306440
转载本站文章《vue2升级vue3:provide与inject 使用注意事项》, 请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8871.html
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。