位置: IT常识 - 正文

vue中的provide/inject你知道吗(vue2、vue3)?(vue中的路由参数如何获取)

编辑:rootadmin
vue中的provide/inject你知道吗(vue2、vue3)?

推荐整理分享vue中的provide/inject你知道吗(vue2、vue3)?(vue中的路由参数如何获取),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中的props是什么意思,vue中的路由是什么意思,vue中的生命周期钩子函数,vue中的provide inject,vue中的路由参数如何获取,vue中的provide/inject,vue中的provide,vue中的provide/inject,内容如对您有帮助,希望把文章链接给更多的朋友!

昨天看一个项目代码看到了provide,但是学习的时候也没看到,看了官网才知道vue还有这个API。多数情况下,provide会和inject一起使用,又叫“依赖注入”。

“依赖注入”主要是解决父子组件传值“props逐级传递”问题。所以,provide/inject的作用就是组件间的传值。

vue2基本用法:1.provide

provide 是一个对象或是返回一个对象的函数。

写在祖先组件中,用于提供给子组件可以注入的值。组件的关系为a-b-c-d

 在a组件中将参数num进行传递

export default { components: { BCom }, data() { return { num: 2, }; }, provide() { return { num: this.num, }; },};2.inject

inject为:一个数组,数组元素为注入的变量

                一个对象,key为注入的变量,value为一个包含form和default的对象

num: { from: 'num', default: '20'}

  在d组件中接收注入的变量

写法一:

export default { inject: ["num"],};

写法二:

export default { inject: { num: { form: "num", default: 20, }, },};vue中的provide/inject你知道吗(vue2、vue3)?(vue中的路由参数如何获取)

 可以看到d中显示的为inject注入的num变量。如果在a中不进行provide,则会显示默认值。

num 不是响应式的

 

 点击+100按钮,a组件显示的值改变,d组件显示的值没有改变。

如何成为响应式?1.方法一:函数方法

a组件:

<template> <div style="width: 600px; height: 600px; background-color: darkgreen"> 我是组件a <h4>{{ num }}</h4> <button @click="add">+100</button> <BCom></BCom> </div></template><script>import BCom from "./b-com.vue";export default { components: { BCom }, data() { return { num: 2, }; }, provide() { return { num: () => this.num, }; }, methods: { add() { this.num = this.num + 100; }, },};</script><style></style>

b组件 

<template> <div style=" width: 300px; height: 300px; background-color: bisque; " > 我是组件d <h4>{{ this.num() }}</h4> </div></template> <script>export default { inject: { num: { form: "num", default: () => {}, }, },};</script> <style></style>2.方法二:传递this

a组件

<template> <div style="width: 600px; height: 600px; background-color: darkgreen"> 我是组件a <h4>{{ num }}</h4> <button @click="add">+100</button> <BCom></BCom> </div></template><script>import BCom from "./b-com.vue";export default { components: { BCom }, data() { return { num: 2, }; }, provide() { return { AThis: this, }; }, methods: { add() { this.num = this.num + 100; }, },};</script><style></style>

d组件

<template> <div style=" width: 300px; height: 300px; background-color: bisque; " > 我是组件d <h4>{{ this.AThis.num }}</h4> </div></template> <script>export default { inject: { AThis: { form: "AThis", default() { return {}; }, }, },};</script> <style></style>vue3的基本用法:

provide() 接受两个参数:第一个参数是要注入的 key,可以是一个字符串或者一个 symbol,第二个参数是要注入的值。

<script setup>import { ref, provide } from 'vue'// 提供静态值provide('num')// 提供响应式的值const count = ref(0)provide('count', count)</script>

inject:

        第一个参数是注入的 key。

        Vue 会遍历父组件链,通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值,那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值,inject() 将返回 undefined,除非提供了一个默认值。

        第二个参数是可选的,即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数,用来返回某些创建起来比较复杂的值。如果默认值本身就是一个函数,那么你必须将 false 作为第三个参数传入,表明这个函数就是默认值,而不是一个工厂函数。

<script setup>import { inject } from 'vue'// 注入值的默认方式const num= inject('num')// 注入响应式的值const count = inject('count')// 注入一个值,若为空则使用提供的默认值const bar = inject('foo', 'default value')// 注入一个值,若为空则使用提供的工厂函数const baz = inject('foo', () => new Map())// 注入时为了表明提供的默认值是个函数,需要传入第三个参数const fn = inject('function', () => {}, false)</script>注:在d组件中,如果data中存在变量num,inject又注入了变量num,在页面中会显示data中num的值。

参考:组合选项 | Vue.js

本文链接地址:https://www.jiuchutong.com/zhishi/299860.html 转载请保留说明!

上一篇:opencv 六 缺陷检测实战2(PCB缺陷检测——小面积缺陷)(opencv焊点缺陷检测)

下一篇:大语言模型集成工具 LangChain(大语言模型集成工具)

  • 公众号怎么样起好文章标题?(公众号怎么样起号)

    公众号怎么样起好文章标题?(公众号怎么样起号)

  • 巧妙优化网站博客 让网站推广事半功倍(优化网站的技巧)

    巧妙优化网站博客 让网站推广事半功倍(优化网站的技巧)

  • iPhone 12屏幕尺寸多大(iphone12屏幕尺寸pro max)

    iPhone 12屏幕尺寸多大(iphone12屏幕尺寸pro max)

  • 苹果7能更新iOS12.4吗(苹果7能更新iOS16吗)

    苹果7能更新iOS12.4吗(苹果7能更新iOS16吗)

  • 如何将哔哩哔哩视频下载到本地(如何将哔哩哔哩视频转化为音频)

    如何将哔哩哔哩视频下载到本地(如何将哔哩哔哩视频转化为音频)

  • 电脑没地线会烧主板吗(电脑没有地线会出现什么情况)

    电脑没地线会烧主板吗(电脑没有地线会出现什么情况)

  • 荣耀30防水防尘级别(荣耀30s 防水)

    荣耀30防水防尘级别(荣耀30s 防水)

  • 最右交友卡怎么删除(最右交友卡模块在哪里)

    最右交友卡怎么删除(最右交友卡模块在哪里)

  • 电脑腾讯会议显示网络异常(电脑腾讯会议显示麦克风设备异常)

    电脑腾讯会议显示网络异常(电脑腾讯会议显示麦克风设备异常)

  • 抖音只能上传60秒吗(抖音只能上传60帧怎么办)

    抖音只能上传60秒吗(抖音只能上传60帧怎么办)

  • 电话手表信号出现红圈怎么办(电话手表信号出现红圈怎么解决)

    电话手表信号出现红圈怎么办(电话手表信号出现红圈怎么解决)

  • 手机报废能导出资料吗(手机报废里面的数据怎么办)

    手机报废能导出资料吗(手机报废里面的数据怎么办)

  • 红米k20什么时候上市(红米k20什么时候生产的)

    红米k20什么时候上市(红米k20什么时候生产的)

  • 滴滴抢单大厅规则(滴滴抢单系统)

    滴滴抢单大厅规则(滴滴抢单系统)

  • 抖音里的抖币怎么兑换现金(抖音里的抖币怎么换成钱)

    抖音里的抖币怎么兑换现金(抖音里的抖币怎么换成钱)

  • Visual Basic应用程序中有哪些文件(visual basic应用程序的运行方式是)

    Visual Basic应用程序中有哪些文件(visual basic应用程序的运行方式是)

  • 已取消的苹果订单能恢复吗(已取消的苹果订单在哪里)

    已取消的苹果订单能恢复吗(已取消的苹果订单在哪里)

  • 红米无线耳机为什么只能有一个有声音?(红米无线耳机为什么不响)

    红米无线耳机为什么只能有一个有声音?(红米无线耳机为什么不响)

  • vivox31什么时候上市(vivox31什么时候出的)

    vivox31什么时候上市(vivox31什么时候出的)

  • 华为mate30pro怎么删除应用(华为mate30pro怎么恢复出厂设置)

    华为mate30pro怎么删除应用(华为mate30pro怎么恢复出厂设置)

  • 小米3c路由器支持多少兆(小米3c路由器支持ipv6吗?)

    小米3c路由器支持多少兆(小米3c路由器支持ipv6吗?)

  • 手机如何设置时间(手机如何设置时间提醒功能)

    手机如何设置时间(手机如何设置时间提醒功能)

  • iphone11支持无线充电吗(iphone11支持无线充电功能吗)

    iphone11支持无线充电吗(iphone11支持无线充电功能吗)

  • 天猫超市退货流程(天猫超市退货流程图解)

    天猫超市退货流程(天猫超市退货流程图解)

  • 金立gn9011是什么型号(金立gn9011是什么手机)

    金立gn9011是什么型号(金立gn9011是什么手机)

  • 小米手机的屏幕分辨率怎么调(小米手机的屏幕使用时间在哪里)

    小米手机的屏幕分辨率怎么调(小米手机的屏幕使用时间在哪里)

  •  6sp上市时间(6sp什么时候上市的)

    6sp上市时间(6sp什么时候上市的)

  • ps版本顺序(ps各版本)

    ps版本顺序(ps各版本)

  • 苹果iPhone6S清除浏览器缓存方法(如何清除苹果手机6s垃圾)

    苹果iPhone6S清除浏览器缓存方法(如何清除苹果手机6s垃圾)

  • 增值税专用发票抵扣期限
  • 税务会计常用会计科目
  • 设计合同服务期限怎么写
  • 单位历史遗留问题
  • 所得税费用会影响营业利润吗
  • 利润表中利息费用包括什么
  • 金税盘维护费抵税账务处理
  • 会计记账凭证如何填制
  • 开发成本属于什么类账户
  • 净资产出资账务处理流程
  • 建筑图纸设计费包括晒图费吗
  • 结算本月应付职工薪酬,其中生产工人工资为18000
  • 增值税发票三个点
  • 公司把贷款的钱转给个人
  • 开完发票业务没收入需要确认收入入账吗?
  • 占用土地行为不征收耕地占用税有哪些?
  • 往期从价房产税未申报怎么处理
  • 现金购入库存商品的分录
  • 未开票的销售要交增值税吗
  • 支付境外销售佣金如何入账科目
  • a公司转给b公司投资款的会计分录
  • 从租计征的房产税纳税义务发生时间
  • 公司清算实收资本是零吗
  • 向境外分配股息怎样算税额
  • 手把手教你win7换主板不重装系统的方法
  • 民宿的房屋租赁合同模板
  • 私车公用的费用可以抵税吗现在
  • 接待客人后的感受和过程
  • linux添加系统用户命令
  • 最快的网络传输速率
  • php如何自定义函数
  • wordpress使用
  • thinkphp5.1完全开发手册
  • 损益类科目的分类
  • PyTorch 深度学习实战 |用 TensorFlow 训练神经网络
  • 用人单位招用失业人员补贴
  • 员工迟到扣款怎么处理
  • 从财务报表中能看出什么
  • 代收通行费不征消费税
  • 房地产返佣
  • 印花税减半征收政策什么时候开始的
  • 金税盘技术维护费每年都减免么
  • sql server数据库怎么使用
  • 增值税专用发票查询系统官方网站
  • 以前年度损益调整在利润表中怎么填
  • 开外经证怎么预约办理
  • 出口应纳增值税
  • 明细与发票
  • 财务费用怎么用
  • 无息的银行承兑汇票
  • 对以前年度的收入怎么算
  • 小规模企业自开收购牛发票增值税怎样申报
  • 社保调低,上半年多缴的怎么办
  • 开票需要缴纳印花税吗
  • 业务招待费管理草案探讨
  • 会计建账的内容
  • Select count(*)、Count(1)和Count(列)的区别及执行方式
  • mysql操作教程
  • 哪个是win8.1更新win10的补丁
  • 电脑win 8系统
  • VMware虚拟机中不支持虚拟化
  • dwm exe是什么
  • centos wget
  • mcshield.exe是什么进程
  • win8取消开始界面
  • win7系统打印机共享给win10
  • 怎么把系统从win10换成win7
  • 批处理传参数
  • 背景透明度设置
  • python数值计算基础
  • javascript运算
  • digitalocean收费
  • unity3d相机设置视角
  • 彻底解决老鼠进发动机舱
  • 河南电子税务局开票流程
  • 国税电子税务局官网
  • 123600是税务电话吗
  • 广东税务数字化平台官网
  • 安徽省各地区最低录取中考分数线
  • 冀地是哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设