返回顶部
首页 > 资讯 > 精选 >Vue中怎么使用provide与inject
  • 617
分享到

Vue中怎么使用provide与inject

2023-07-05 13:07:49 617人浏览 薄情痞子
摘要

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

本篇内容介绍了“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”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: Vue中怎么使用provide与inject

本文链接: https://www.lsjlt.com/news/352152.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue中怎么使用provide与inject
    本篇内容介绍了“Vue中怎么使用provide与inject”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在vue2.0里面provide与...
    99+
    2023-07-05
  • Vue中的provide和inject怎么使用
    今天小编给大家分享一下Vue中的provide和inject怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在vue2...
    99+
    2023-07-06
  • Vue 中 provide和inject的使用
    目录前言Vue中如何使用provide和inject在 Vue 中使用注入访问父数据前言 在Vue中我们可以很方便的通过父组件往子组件传递属性,Props是我们将数据传递到子组件的主...
    99+
    2022-11-13
    Vue 中 provide的使用 Vue 中inject的使用
  • 详解在Vue中如何使用provide与inject
    目录provide()函数inject()函数总结在vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的,解决的是跨组件(祖孙)间通信的一种方...
    99+
    2023-03-20
    Vue使用provide inject Vue provide inject
  • vue3中provide和inject怎么使用
    本篇内容主要讲解“vue3中provide和inject怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3中provide和inject怎么使用”吧!前言:在父子组件传递数据时,通常...
    99+
    2023-06-21
  • Vue3中的provide、inject怎么使用
    一. 场景再现先别着急考虑标题这个 api 的含义。在这里我先动手写一个比较常见的场景。所对应的组件内部代码比较简单,这里我就不展示了,逻辑上就是 这三个组件层层引用。所对应的页面效果如下:如上图,这是一个在项目中很常见的一个场景,三层嵌套...
    99+
    2023-05-14
    Vue3 provide inject
  • Vue3的provide/inject怎么使用
    本文小编为大家详细介绍“Vue3的provide/inject怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue3的provide/inject怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思...
    99+
    2024-04-02
  • Vue的provide/inject如何用
    这篇文章主要讲解了“Vue的provide/inject如何用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue的provide/inject如何用”吧!...
    99+
    2024-04-02
  • vue3中provide和inject怎么用
    这篇文章将为大家详细讲解有关vue3中provide和inject怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。provide 和 inject 的讲解provide和inject可以实现嵌套组件之...
    99+
    2023-06-20
  • Vue中provide、inject详解以及使用教程
    目录Vue中 常见的组件通信方式可分为三类1. provide / inject 简介2. provide / inject 使用方法3. 总结总结传送门:Vue中 子组件向父组件传...
    99+
    2022-11-16
    vue中的provide/inject vue3 provide inject vue inject provide
  • Vue3插件中怎么使用Provide和Inject
    今天小编给大家分享一下Vue3插件中怎么使用Provide和Inject的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。为什么...
    99+
    2023-07-04
  • vue高级组件之provide与inject使用及说明
    目录vue provide与inject使用及说明vue中不同组件通信方式如下缺点vue3中父子组件传值(provide/inject)具体操作总结vue provide与injec...
    99+
    2023-05-17
    vue高级组件 vue provide vue inject
  • vue3中provide和inject的使用
    1.provide 和 inject 的讲解 provide和inject可以实现嵌套组件之间进行传递数据。 这两个函数都是在setup函数中使用的。 父级组件使用provide向...
    99+
    2024-04-02
  • 应用provide与inject刷新Vue页面方法
    目录方法1:直接调用函数方法2:采用provide / inject(静刷新)优势比较方法1:直接调用函数 将整个页面重载, 以下两种都可以 1.window.location.r...
    99+
    2024-04-02
  • 一文聊聊Vue中provide和inject的使用方法
    Vue中如何使用provide与inject?下面本篇文章就来给大家介绍一下Vue中provide和inject的使用方法,希望对大家有所帮助!在vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的,...
    99+
    2023-05-14
    Vue javascript
  • Vue3中的provide、inject的用法
    目录一. 场景再现二. 传递 Props三. provide 和 inject四. provide 的进阶用法五. 源码六. 思考题前言: 在前端项目中牵扯的最多的莫过于组件之间的传...
    99+
    2023-03-06
    Vue3 provide inject使用 Vue3 provide inject
  • vue2中provide/inject的使用与响应式传值详解
    目录前言一、基本用法二、响应式1.方法一:传递的参数用一个方法返回2.方法二:把需要传递的参数定义成一个对象总结前言 官网概念:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后...
    99+
    2024-04-02
  • vue中provide和inject怎么实现原理对抗平庸
    本篇内容主要讲解“vue中provide和inject怎么实现原理对抗平庸”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中provide和inject怎么实现原理对抗平庸”吧!provid...
    99+
    2023-07-06
  • 怎么用 Provide 和 Inject 做Vue3插件
    这篇文章主要介绍“怎么用 Provide 和 Inject 做Vue3插件”,在日常操作中,相信很多人在怎么用 Provide 和 Inject 做Vue3插件问题上存在疑惑,小编查阅了各式资料,整理出简单...
    99+
    2024-04-02
  • vue中provide inject的响应式监听问题怎么解决
    这篇文章主要介绍“vue中provide inject的响应式监听问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue中provide inject的响应式监听问题怎...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作