vue3- provide和inject
依赖注入的优势
在我们平时写项目中常常会建立很多的组件树，什么父子组件，爷孙组件都是很常见的,组件组件我们常常使用props来进行传值，但难免会遇到层级很深的传值，比如爷爷组件需要传值给孙子组件，就像下面这种情况
但是！！！实际上爸爸组件（图中的Footer组件）又不需要这个值，所以我感觉这样子传值会显得很捞，而且组件复用性变差。那我们有没有什么方式不经过爸爸组件，从而让孙子组件收到这个值？那么我们今天的主角就要登场了！！！
provide和inject 的使用
主要流程是使用provide先注册，在使用inject接收这个值
注册
provide函数接收两个值
1
2
| key为字符串，其需要具有唯一性 value是需要传递的值，或者是变量，函数等
provide(key,value)
|
接收
inject使用唯一key获取相应的值
1
2
| mes就是我接收过来的值，而第二个参数则是默认值，当没有相应的key注册时，mes是默认值
const mes=inject(key,default)
|
简单示例
爷爷组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div style="width: 100%; height: 100%;" >
<h1>{{ mes }}</h1>
<button @click="addnum" >点击</button>
<father />
</div>
</template>
<script setup >
import father from './father.vue'
import {provide, ref} from "vue"
let mes=ref(0)
let addnum=()=>{
mes.value++
}
provide('mes',mes)
provide('num',addnum)
</script>
|
爸爸组件
1
2
3
4
5
6
7
8
| <template>
<son />
</template>
<script setup >
import son from './son.vue'
</script>
<style>
</style>
|
孙子组件
1
2
3
4
5
6
7
8
9
| <template>
<h1>{{ mes }}</h1>
<button @click="addnum" >点击</button>
</template>
<script setup >
import {inject} from "vue"
const mes=inject('mes',0)
const addnum=inject('num',()=>{})
</script>
|
爷爷组件传给孙子组件的mes数据是响应式的，爷爷组件中的mes改变孙子组件的值也随之改变
而在孙子组件中触发addnum相当于在爷爷组件中触发，所以爷爷组件的mes也可以被孙子改变