写点什么

vue2 升级 vue3:provide 与 inject 使用注意事项

作者:zhoulujun
  • 2022 年 7 月 25 日
  • 本文字数:1496 字

    阅读完需:约 5 分钟

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

VUE provide 和 inject 使用场景

当我们需要从父组件向子组件传递数据时,我们使用 props。

而一些深度嵌套的组件,深层的子组件只需要父组件的部分内容。

若仍然将 prop 沿着组件链逐级传递下去的话,可能会很麻烦。


VUE 提供了 provide 和 inject 来解决了这个问题。

无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。

父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据。


vue props 父子组件数据传递


vue3 Provide / Inject


这个比 react 的 createContext 和 useContext 使用简单!也好理解些!当然熟悉 react 的,还可以参考:https://github.com/zephraph/vue-context-api


在 vue2.x 中使用 provide 和 inject

父组件

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.x 中使用 provide 和 inject

vue3 用方法太多,这里具体看官方案例

具体参看:https://vuejs.org/guide/components/provide-inject.html

需要注意的事项:

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

  • 为了给 provide/inject 添加响应性,使用 ref 或 reactive 

父组件

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

发布于: 刚刚阅读数: 3
用户头像

zhoulujun

关注

还未添加个人签名 2021.06.25 加入

还未添加个人简介

评论

发布
暂无评论
vue2升级vue3:provide与inject 使用注意事项_Vue3_zhoulujun_InfoQ写作社区