简述
当我们习惯使用组件来实现页面功能的时候,我们会很清晰的把组件尽可能分离成原子颗粒,这样在后期的维护和升级中就可以快速开发迭代。但在组件开发模式中,会遇到这样一个常见的问题,当我们一个页面会有很多组件,并且组件嵌套较多的情况下,实现数据的传输或者共享就会变得比较复杂,一种比较直接的实现方式就是从 root 也就是根节点逐层传递到的相应的子节点,但 Vue3 的依赖注入则可以快速帮我们实现该数据传递和分享。下面我们来简单介绍一下 Vue 依赖注入的使用方式。
Provide
在 Vue3 中的选项式 API 中,我们可以使用 provide
来实现数据的提供,换而言之,我们在数据的提供方代码模块出,提供需要传递的数据。比如我们在 Parent 模块中,需要提供一个message 变量,而且更为方便的是,我们可以直接提供 ref
数据。
#Parent.vue
<script setup>
import { ref, provide } from 'vue'
const message = ref('hello world')
provide('message', message) // provide的第一个参数为变量名,第二个参数为需要提供的变量
</script>
<template>
....
</template>
Inject
接下来,在 children 组件中,我们可以通过 inject
快速获得。
<script setup>
import { inject } from 'vue'
const message = inject('message')
</script>
<template>
<div>
{{message}}
</div>
</template>
注意的是,我们在 Parent 组件中传入的 ref
不是解包的,这样会保留响应式。
以上,就是我们快速使用 Vue 的依赖注入,实现数据的逐层传递,这样大大提升了我们的开发效率。