Vue3 理解 provide / inject 的作用、使用
通过上面案例我们还能清楚的看到父组件和子组件任意方改动数据时都会同步更新,但建于后续的维护,官方的推荐做法是由调用。属性,这里就会有问题,如果父组件的数据需要送到 N 层子组件,那么就要传递 N 次。多层嵌套的问题,有了它,只需声明一次数据就够了,使用方式也很简单。本文就到这里,对于使用 TS 项目的同学,建议前往。父组件中管理并提供函数,子组件只需引入调用即可。函数的组件负责维护,这里便是由父组
1、provide&inject 是什么
正常情况下,父子组件之间的数据传递需要用到 props
属性,这里就会有问题,如果父组件的数据需要送到 N 层子组件,那么就要传递 N 次 props
属性,非常繁琐,而 provide / inject
就是用来解决 props
多层嵌套的问题,有了它,只需声明一次数据就够了,使用方式也很简单。
2、provide&inject 的使用
假设父组件是 A.vue
,子组件是 B.vue
,子子组件是C.vue
,如果 C.vue
子子组件想要 A.vue
父组件的数据,我们只需在 A.vue
父组件调用 provide
函数导出数据, 然后 C.vue
调用 inject
函数导入数据就可以了,无须经过 B.vue
组件层,
案例如下:
// A.vue
setup() {
const info = reactive({
name: 'Tony',
age: 99
})
provide('userInfo', info) // 导出
}
// C.vue
setup() {
const info = inject('userInfo') // 导入
}
是不是很简单,我们来看看完整代码和效果图:
父组件 A.vue
<template>
<div class="child">
父组件访问到的数据是:<span>{{ info.name }} {{ info.age }}</span>
</div>
<button @click="updateInfo">父组件点击更新数据</button>
<child />
</template>
<script>
import child from './child.vue'
import { provide, reactive } from 'vue'
export default {
components: {
child
},
setup() {
const info = reactive({
name: 'Tony',
age: 99
})
provide('info', info)
// 父组件更新数据
const updateInfo = () => {
info.name = 'Jack'
info.age = 8000
}
return {
info,
updateInfo
}
}
}
</script>
子组件 C.vue
<template>
<div class="child">
子组件访问到的数据是:<span>{{ info.name}} {{ info.age }}</span>
</div>
<button @click="updateInfo">子组件点击更新父组件数据</button>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const info = inject('info')
// 子组件更新数据
const updateInfo = () => {
info.name = 'Nick'
info.age = 10000
}
return {
info,
updateInfo
}
}
}
</script>
通过上面案例我们还能清楚的看到父组件和子组件任意方改动数据时都会同步更新,但建于后续的维护,官方的推荐做法是由调用 provide
函数的组件负责维护,这里便是由父组件A.vue
负责管理 provide
的数据, 子组件只需 inject
进来调用即可,遵循自顶向下规则,这里我们按照官方的规范稍作修改:
A.vue
const updateInfo = () => {
info.name = 'Jack'
info.age = 8000
}
provide('updateInfo', updateInfo)
C.vue
const updateInfo = inject('updateInfo')
这里将改动数据的操作迁移至 A.vue
父组件中管理并提供函数,子组件只需引入调用即可。
本文就到这里,对于使用 TS 项目的同学,建议前往 Vue3 & InjectionKey 的作用、使用 阅读了解 InjectionKey
函数,使用方式也很简单,是 provide&inject
的好搭档。
另外笔者整理了 Vue3 学习指南总结 ,有兴趣的话可以看看。
更多推荐
所有评论(0)