文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue 3 学习笔记—Provide 和 Inject 用法及原理

2024-12-02 13:55

关注

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦。

像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套多深,父组件都可以为所有子组件或孙组件提供数据,父组件使用 provide 提供数据,子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。

一、Vue2 的 provide / inject 使用

provide :是一个对象,里面是属性和值。如:

  1. provide:{ 
  2.  info:"值" 

 如果 provide 需要使用 data 内的数据时,这样写就会报错。访问组件实例 property 时,需要将 provide 转换为返回对象的函数。

  1. provide(){ 
  2.  return
  3.   info: this.msg 
  4.  } 

 inject :是一个字符串数组。如:

  1. inject: [ 'info' ] 

接收上边 provide 提供的 info 数据,也可以是一个对象,该对象包含 from 和 default 属性,from 是可用做的注入内容中搜索用的 key,default 属性是指定默认值。

在 vue2 中 project / inject 应用:

  1. //父组件 
  2. export default
  3.  provide:{ 
  4.   info:"提供数据" 
  5.  } 
  6. //子组件 
  7. export default
  8.  inject:['info'], 
  9.  mounted(){ 
  10.     console.log("接收数据:", this.info) // 接收数据:提供数据 
  11.  } 
  12. }  

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

二、Vue3 的 provide / inject 使用

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

provide 函数接收两个参数:

provide( name,value )

name:定义提供 property 的 name 。

value :property 的值。

使用时:

  1. import { provide } from "vue" 
  2. export default { 
  3.   setup(){ 
  4.     provide('info',"值"
  5.   } 

 inject 函数有两个参数:

inject(name,default)

name:接收 provide 提供的属性名。

default:设置默认值,可以不写,是可选参数。

使用时:

  1. import { inject } from "vue" 
  2. export default { 
  3.   setup(){ 
  4.     inject('info',"设置默认值"
  5.   } 

 完整实例1:provide/inject实例

  1. //父组件代码 
  2.  
  3.  
  4. //子组件 代码 
  5.  
  6.   

三、添加响应性

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

完整实例2:provide/inject 响应式

  1. //父组件代码 
  2.  
  3.  
  4.  
  5. // InjectCom 子组件代码 
  6.  
  7.  

上述示例,在父组件或子组件都会修改 info 的值。

provide / inject 类似于消息的订阅和发布,遵循 vue 当中的单项数据流,什么意思呢?就是数据在哪,修改只能在哪,不能在数据传递处修改数据,容易造成状态不可预测。

在订阅组件内修改值的时候,可以被正常修改,如果其他组件也使用该值的时候,状态容易造成混乱,所以需要在源头上规避问题。

readonly 只读函数,使用之前需要引入,如果给变量加上 readonly 属性,则该数据只能读取,无法改变,被修改时会发出警告,但不会改变值。

使用方法:

  1. import { readonly } from "vue" 
  2. let info = readonly('只读info值'
  3. setTimout(()=>{ 
  4.  info="更新info" //两秒后更新info的值 
  5. },2000) 

 运行两秒后,浏览器发出警告,提示 info 值不可修改。

所以我们就给provide发射出去的数据,添加一个只读属性,避免发射出去的数据被修改。

完整实例2的 provide 处添加 readonly 。

  1. provide('info', readonly(info)) 

在子组件修改值的时候,会有一个只读提醒。

修改值的时候,还是需要在 provide 发布数据的组件内修改数据,所以会在组件内添加修改方法,同时也发布出去,在子组件处调用就可以了。如:

  1. //发布 
  2. let info = ref("今天你学习了吗?"
  3. const changeInfo = (val)=>{ 
  4.  info.value = val 
  5. provide('info',readonly(info)) 
  6. provide('changeInfo',changeInfo) 
  7.  
  8. //订阅 
  9. const chang = inject('changeInfo'
  10. chang('冲向前端工程师'

 完整示例3:修改数据

  1. // 父组件代码 
  2.  
  3.  
  4.  
  5.  
  6. //InjectCom 子组件代码 
  7.  
  8.  

 

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯