搜索
首页web前端js教程vue中provide/inject使用步骤详解

这次给大家带来vue中provide/inject使用步骤详解,vue中provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

下面我们来验证下猜想:

first:定义一个parent component

<template>
 <p>
<childOne></childOne>
 </p>
</template>
<script>
 import childOne from '../components/test/ChildOne'
 export default {
  name: "Parent",
  provide: {
   for: "demo"
  },
  components:{
   childOne
  }
 }

在这里我们在父组件中provide for这个变量。

second 定义一个子组件

<template>
 <p>
  {{demo}}
  <childtwo></childtwo>
 </p>
</template>
<script>
 import childtwo from './ChildTwo'
 export default {
  name: "childOne",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  },
  components: {
   childtwo
  }
 }
</script>

third 定义另一个子组件

<template>
 <p>
  {{demo}}
 </p>
</template>
<script>
 export default {
  name: "",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  }
 }
</script>

在2个子组件中我们使用jnject注入了provide提供的变量for,并将它提供给了data属性。

这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 props 和 data 初始化之后得到。

运行之后看下结果

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样使用vue实现2048小游戏

如何操作Vue内使用vee-validate

以上是vue中provide/inject使用步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Vue中如何使用provide/inject实现祖先组件和后代组件之间的方法传递Vue中如何使用provide/inject实现祖先组件和后代组件之间的方法传递Jun 11, 2023 pm 12:17 PM

Vue作为一款流行的前端框架,提供了多种方法来组织和管理组件之间的交互。在Vue中,provide和inject是两个可以使用来实现祖先组件和后代组件之间方法传递的方法。provide和inject是Vue提供的高级组件与组件之间通信的方法,其作用是为祖先组件提供数据,然后在后代组件使用inject方法来接收数据。1、provide和inject的定义pro

Vue3中的provide、inject怎么使用Vue3中的provide、inject怎么使用May 11, 2023 pm 11:52 PM

一.场景再现先别着急考虑标题这个api的含义。在这里我先动手写一个比较常见的场景。所对应的组件内部代码比较简单,这里我就不展示了,逻辑上就是这三个组件层层引用。所对应的页面效果如下:如上图,这是一个在项目中很常见的一个场景,三层嵌套的组件。(其实还有深层次的嵌套,目前我们拿三层嵌套举例足矣)ok,你现在的需求是:在爷爷组件内需要提供一个字符串数据“韩振方”去提供给儿子组件使用。聪明的你肯定想到了props,废话不多说,我们直接上手。二.传递Props“我以为多高深呢,这不就是数据父传子的场景吗?

Python中的GUI库wxPython详解Python中的GUI库wxPython详解Jun 09, 2023 pm 10:00 PM

Python是一种简洁、易学、高效的编程语言。它广泛应用于各种领域,如数据科学、人工智能、游戏开发、网络编程等。虽然Python自带有一些GUI库,但他们的功能较为简单,无法满足各类复杂应用的需求。因此,Python中有许多GUI库可供选择,其中wxPython是其中一个,本文将详细介绍。wxPython简介wxPython是一个开源、跨平台的GUI库,它基

Vue中如何使用provide/inject实现祖先组件和后代组件之间的数据传递Vue中如何使用provide/inject实现祖先组件和后代组件之间的数据传递Jun 11, 2023 am 11:36 AM

在Vue中,我们常常需要在组件之间进行数据传递。而在祖先组件和后代组件之间传递数据时,我们可以使用Vue提供的provide/inject来实现。一、provide/inject的作用在Vue中,provide和inject是一对用于祖先和后代之间进行数据传递的API。具体来说,provide用于在祖先组件中定义一些需要共享的数据/方法,而inject则用于

Vue中使用provide和inject实现组件间数据传递与性能优化Vue中使用provide和inject实现组件间数据传递与性能优化Jul 17, 2023 pm 07:19 PM

Vue中使用provide和inject实现组件间数据传递与性能优化在Vue中,组件间的数据传递是非常常见的需求。有时候我们希望在组件树的某个节点提供数据,然后在其后代组件中使用这些数据,这时候就可以使用Vue的provide和inject来实现。除了数据传递,provide和inject还可以用于性能优化,减少props传递的层级,提高组件的性能。prov

Vue报错:无法正确使用provide和inject进行依赖注入,如何解决?Vue报错:无法正确使用provide和inject进行依赖注入,如何解决?Aug 25, 2023 pm 10:13 PM

Vue报错:无法正确使用provide和inject进行依赖注入,如何解决?在Vue的开发过程中,我们经常需要在组件间共享数据或方法。vue提供了多种方式来实现组件通信,其中一种方式是通过provide和inject进行依赖注入。然而,在使用provide和inject进行依赖注入时,有时候我们会遇到报错的情况,本文将探讨这些问题的解决方案。报错信息当我们在

Go语言中的Socket编程详解Go语言中的Socket编程详解Jun 01, 2023 am 08:07 AM

近年来,Go语言(也称为Golang)在程序员社区中越来越受欢迎。Go语言简单易学、高效强大、安全稳定,因此深受开发人员的喜爱。其中,Go语言对Socket编程的支持得到了广泛的关注和赞誉。本文将对Go语言中的Socket编程进行详细介绍,涉及基本原理、使用方法、代码实现等相关内容。一、Socket编程基本原理Socket编程是指在网络编程中使用Socket

Vue3插件中怎么使用Provide和InjectVue3插件中怎么使用Provide和InjectJun 01, 2023 pm 08:34 PM

为什么Vue3插件的工作方式与以往不同在Vue2中,大多数插件将属性注入到this上。例如可以通过this.$router访问Vue路由器。但是,setup()方法不再包含对this的相同引用。进行这种更改的主要原因是增加了对Typescript的支持。那么在Vue3中该如何访问我们的插件呢?可以用provide和inject来帮助我们在Vue程序中注入依赖项。Provide/inject用于依赖项注入,可以使我们能在Vue程序的根目录中提供插件,并且然后将其注入子组件中。在Compositio

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具