vue中的provide/inject的学习使用

Posted 风吹麦浪打

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的provide/inject的学习使用相关的知识,希望对你有一定的参考价值。

irst:定义一个parent component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
 <div>
<childOne></childOne>
 </div>
</template>
 
<script>
 import childOne from ‘../components/test/ChildOne‘
 export default {
  name: "Parent",
  provide: {
   for: "demo"
  },
  components:{
   childOne
  }
 }

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

second 定义一个子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

third 定义另一个子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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来注入父组件中的值。

以上是关于vue中的provide/inject的学习使用的主要内容,如果未能解决你的问题,请参考以下文章

vue3如何进行数据依赖注入provide/inject

详解vue中的provide/inject

vue组件通讯之provide / inject

Vue小技能:在 setup() 中使用provide/ inject

Vue 开发实战基础篇 # 12:常用高级特性provide/inject

vue 初步了解provide/inject