位置: 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(大语言模型集成工具)

  • 公司车船使用税会计分录
  • 小规模纳税人进项可以抵扣吗
  • 税盘维护费抵扣
  • 税控盘维护费发票普通发票
  • 固定资产清理费用计入哪里
  • 失控发票一定要补税吗
  • 合同金额含税不含税
  • 会议费发票能抵扣吗
  • 借款当月算利息吗
  • 预付账款和暂估入账的区别
  • 固定资产加速折旧的方法有哪些
  • 一般纳税人建筑工程税率是多少
  • 银行承兑汇票背书可以拆分
  • 残保金上年在职职工工资总额怎么填
  • 一般纳税人购买并销售免税货物所发生的运输费用
  • 增值税普票没有校验码
  • 财务软件怎样结转销售成本
  • 应收账款管理制度设计毕业设计
  • 小企业净资产收益率
  • 分配利润和分配股利
  • 金税系统年度维护费发票抵扣需要认证吗?
  • 没有汇算清缴可以弥补以前年度亏损吗
  • 在职员工 开公司
  • 法人一证通年费缴费
  • bios中英文对照表图新版
  • 兼营行为的含义
  • 如何办理存款证明
  • 存出保证金计入货币资金吗
  • 定额发票收入怎么样确定
  • 外地企业预缴税款流程
  • 公司出租房屋怎样开发票的税务局率?
  • 罚款在企业所得税前可以扣除吗
  • 贴现资金是信贷资金吗
  • yolov1网络结构图详解
  • php curl命令详解
  • 微信小程序实现灯泡开关效果
  • 营改增几个阶段
  • 企业缴纳残保金规定
  • 若依框架用到的技术
  • 年度一次性奖励扣税
  • phpcms默认密码
  • curl抓包
  • 原值净值怎么算
  • SQL2005 provider: 命名管道提供程序 error: 40 无法打开到 SQL Server 的连接
  • mysql5.5远程连接
  • 事业单位银行开户规定
  • 收到发票未收到货物
  • 其他综合收益算当期损益吗
  • 契税是指什么?
  • 可抵扣进项税有哪些项目
  • 利润分配科目是所有者权益科目吗
  • 营改增后增加了什么征税项目
  • 三年期定期存款利率怎么算
  • 付当月房租怎么做分录
  • 行政事业单位支出范围和标准
  • 公司向个人借款合法吗
  • 哪些商业保险可以抵扣个税
  • 事业单位预收账款转收入如何做账
  • 什么叫社保差额调整
  • mysql的zip包怎么安装
  • Windows 8.1下MySQL5.7 忘记root 密码的解决方法
  • 怎样用windows
  • win8系统升级到win 10
  • windows vista(service pack1)
  • win2000系统禁止ping
  • CentOS 6.2(32位/64位) 安装步骤图文详解
  • winxp系统用户不见了
  • 重装系统后要重装软件吗
  • windows用户注册
  • 怎么防电胖
  • win10开机显示recover
  • http状态码一览表
  • python用于读取文本文件内容的方法
  • 有道词典下载安装
  • python在windows
  • 使用二氧化碳灭火器时人应该站在什么位置
  • Android开发中的几种管理机制的使用场景是什么
  • Android之fill_parent和wrap_content
  • 宁波地税如何网上缴费
  • 江苏钢厂排名前十
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设