X
XiaoSong
V1
2023/03/06阅读:16主题:默认主题
依赖注入
Prop 逐级透传问题
当组件嵌套很深的时候,深层的组件需要获取很外层的祖先组件的属性时,如果还使用
prop
逐渐传递会很麻烦,那么就可以使用provide/inject
。provide
用来提供数据,inject
用来获取数据。
provide
为后代提供数据,
provide(注入名, 注入值)
。注入值可以是任意类型的值,也可以是ref
响应式数据。一个组件挡住可以写多个provide()
import {ref, provide} from 'vue'
const count = 0
const ref sum = ref(0)
provide('count', count)
provide('sum', sum)
应用层provide
这个
provide
在整个应用的任意位置组件都可以使用inject
获取
import { createApp } from 'vue'
const app = createApp({})
app.provide('message', 'vue3')
inject
用来获取
provide
提供的数据。inject(注入名)
。
import {inject} from 'vue'
// 获取应用层提供的 `message`
console.log(inject(message)) // vue3
一个完整的provide/inject示例:
<!-- 爷爷组件:mess -->
<script setup>
import { ref, provide } from 'vue'
import Child from './Child.vue'
const message = ref('hello')
provide('message', message)
</script>
<template>
<input v-model="message">
<Child />
</template>
<!-- child组件,是mess组件的子组件 -->
<script setup>
import GrandChild from './GrandChild.vue'
</script>
<template>
<GrandChild />
</template>
<!-- GrandChild组件是Child组件的儿子,mess组件的孙子 -->
<script setup>
import { inject } from 'vue'
const message = inject('message')
</script>
<template>
<p>
Message to grand child: {{ message }}
</p>
</template>
最终运行效果:
文本框输入什么,下面显示什么
修改provide提供的响应式数据:
一般修改响应式数据建议在提供数据的组件中修改,这样易于维护。如果要在
inject
组件中修改数据建议在provide
组件中提供一个更改数据的函数一并传递出去。
import { provide, ref } from 'vue'
const number = ref(0)
const updata () => {
number.value = 1
}
provide('number', {
number,
updata
})
// 注入方
import { inject } from 'vue'
const { number, updata } = inject('number')
<button @click="updata">{{ number }}</button>
作者介绍
X
XiaoSong
V1