【vue】provide/inject

provide/ inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

通途点来讲可以用来实现隔代传值,传统的props只能父传子,而 provide/ inject无论子组件有多深,只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,这就是它最大的特性。

一、基本语法

provide 选项:一个对象或返回一个对象的函数
inject选项:一个字符串数组,或 一个对象,对象的 key 是本地的绑定名

二、代码示例

1、定义一个parent component

html 复制代码
<template>
  <div>
      <childOne></childOne>
  </div>
</template>

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

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

2、定义一个子组件

html 复制代码
<template>
  <div>
    {{demo}}
    <childtwo></childtwo>
  </div>
</template>

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

3、定义另一个子组件

html 复制代码
<template>
  <div>
    {{demo}}
  </div>
</template>

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

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

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

运行之后看下结果

从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。

三、总结

provide/inject使用缺点也很明显,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了,因此这个属性通常并不建议使用。

provide和inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

相关推荐
dme.8 分钟前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->10 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~12 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo13 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末32 分钟前
React——基础
前端·react.js·前端框架
aklry43 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端