文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中怎么使用provide与inject

2023-07-05 13:48

关注

本篇内容介绍了“Vue中怎么使用provide与inject”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

vue2.0里面provideinject是以选项式(配置)API的方式在组件中进行使用的,解决的是跨组件(祖孙)间通信的一种方式

也就是父子组件间的通信,父组件上市通过自定义属性,而子组件间通过props这种方式接收,如果想要一层一层的传递,这种方式就会比较麻烦,不灵活

provideinject就是解决:怎么从祖组件的数据,传递到孙组件,实现跨级组件传递数据的

vue3.0里面,同样提供了provideinject,使用起来更简单方便,单纯的从概念上去看,是比较抽象,难以理解的

还是要从具体的实例出发

provide()函数

定义:提供一个值,可以被后代组件注入

实现: 父组件有一个provide,选项来提供数据,后代组件中有一个inject选项来开始使用父组件传递过来的数据

provide(第一个参数,第二个参数),接收两个参数,第一个参数是要注入的key,它可以是一个字符串或一个symbol,第二个参数是要注入的值(具体要传递给子孙组件的数据)

providevue官方提供的componsition API

具体示例代码如下所示

import {reactive,provide} from "vue";let person = reactive({name: 'itclanCoder',website: 'https://coder.itclan.cn'});provide('person',person);

通过上面的provide提供一个值,就可以了的,那怎么样把这个数据传递到子孙组件,那么就需要用到inject了的

inject()函数

定义: 注入一个由祖先(父)组件或整个应用提供的值

实现: 接收父(祖)组件传递过来的值

inject(第一个参数,第二个参数(可选)):第一个参数是注入的key,来自父(祖)组件,它们两者是需要保持一致的

Vue会遍历父组件链,通过匹配key来确定所提供的值,如果父组件链上多个组件对同一个key提供了之,那么离得更近的将会覆盖链上更远的组件所提供的值

如果没有能通过key匹配到的值,inject()函数将返回undefined,除非提供一个默认值

第二个参数是可选的,即没有匹配到key时,使用默认值,它也可以是一个函数,用来返回某些创建起来比较复杂的值,如果默认值本身就是一个函数

那么必须将false作为第三个参数传入,表明这个函数就是默认值,而不是一个工厂函数

与注册生命周期钩子的API类似,inject()必须在组件的setup()阶段同步调用

具体示例代码

import {inject,toRefs} from  "vue";const person = inject('person');// 若是使用解构,则会丢失响应式,修改数据时,页面不会更新,具体解决,可以引入toRef或toRefs函数const {name,website} = toRefs(person);

在孙组件中的模板即可以读取,从父组件传递过来的数据也是支持响应式的

{{person.name}}---{{person.website}}

若使用解构时,则模板中可直接使用变量

{{name}}--{{website}}

若使用解构时,则模板中可直接使用变量

{{name}}--{{website}}

注意

如果是解构变量,想要数据响应式,那么需要使用toRef()toRefs()将数据进行转化为响应式

如下是完整的示例

import { inject } from 'vue'import { fooSymbol } from './injectionSymbols'// 注入值的默认方式const foo = inject('foo') // 注入响应式的值const count = inject('count')// 通过 Symbol 类型的 key 注入const foo2 = inject(fooSymbol)// 注入一个值,若为空则使用提供的默认值const bar = inject('foo', 'default value')// 注入一个值,若为空则使用提供的工厂函数const baz = inject('foo', () => new Map())// 注入时为了表明提供的默认值是个函数,需要传入第三个参数const fn = inject('function', () => {}, false)

基本上用第一种注入默认值的方式,使用是最多的,接收父组件提供传递过来的值

“Vue中怎么使用provide与inject”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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