vue3.0 依赖注入 provide()和inject()使用教程

Posted 2022-09-27 郝艳峰Vip

前言

---

本文是基于Vue3.0的依赖注入，2.0的可以看官方文档的，这里就不列出了

• 1，在项目开发过程中，在遇到组件层级嵌套较深的项目的时候，父子组件传参就有些力不从心了，这个时候的代替方案可以是Vuex或者eventBus,当然本文会介绍一个新的传参方式，也就是依赖注入(provide()/inject())，
• 2， 相比较前两者，vuex官方文档有说，不适合简单的应用，那这个时候就会考虑用简单的方式传参，个人感觉依赖注入是要比eventBus好用一些，今天就详细介绍如何使用。
• 3，之前我有总结过vue组件传参的博文可以参考一下vue2.0父子组件以及非父子组件传参详解

---

废话少说，直接上代码，接下来看一下依赖注入是如何使用的

第一步：provide(key,value) 父组件传给后代组件的方法

provide() 接受两个参数，第一个参数是key,第二个是value

在你想要传给后代组件的页面,使用provide()传参

<template>
	<testInjectProvide></testInjectProvide>
</template>
<script setup>
import testInjectProvide from './testInject.vue';
// 测试inject和provide  依赖注入
// provide 提供一个值，可以被后代组件注入
//这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效
import  provide  from 'vue';
provide('provideKey','测试provide注入的值');
</script>

第二步：inject(key,value) 后代组件接收值的方法

第一个参数是注入的 key。Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。

第二个参数是可选的，即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。如果默认值本身就是一个函数，那么你必须将 false 作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。

这是结合上下文的testInject.vue文件，内容如下

<template>
      <div>这里是后代组件  inject  proivde</div>
</template>
<script setup>
import inject from 'vue';
const jieShouProvideValue = inject('provideKey');
console.log(jieShouProvideValue)
const haveDefault = inject('haveDefault','123456789');
console.log(haveDefault);//此处就是没有遍历到provide的key，就会取值'123456789'
</script>

结束语

至此，就可以完整的完成依赖注入传值了。看懂的小伙伴可以看着操作一遍，就记得更深刻了。