持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
什么是依赖注入
依赖注入是 vue3 中引入的新的组件传值方式，通过 provide/inject 实现。
主要就是为了实现 props 的逐级透传，依赖注入传值可以由父组件传值给它的所有后代组件，只要是他后代链上的子组件都可以。
需要注意的是：依赖注入只适用于父子组件，不适用于兄弟组件传值。 依赖注入是单项数据流传值
provide(提供)
要为组件后代提供数据，需要使用到 provide() 函数：
-
provide()函数接收两个参数。第一个参数被称为注入名，可以是一个字符串或是一个 `Symbol。
- 后代组件会用注入名来查找期望注入的值
- 一个组件可以多次调用
provide()，使用不同的注入名，注入不同的依赖值。
-
第二个参数是提供的值，值可以是任意类型，包括响应式的状态
inject（注入）
要注入上层组件提供的数据，需使用 inject() 函数：
实现方法
（1）选项式
父组件提供 provide：
<script>
export default {
provide: {
user: '张三'
}
}
</script>
后代组件注入 inject：
<script>
export default {
data() {
return {
user:'张三'
}
},
provide() {
return {
user：this.user // 用函数返回对象。这里的值即可以自定义内容，也可以使用data里的变量值
}
}
}
</script>
上面这种方式不是响应式的，如果想在数据更新时同步改变，需要借助于 computed。
<script>
import { computed } from 'vue'
export default {
data() {
return {
user:'张三'，
name: '法外狂徒'
}
},
provide() {
return {
user：computed(() => this.user),
name: computed(() => this.name) // 多条可以依次写，互相之间不干扰
}
}
}
</script>
（2）组合式
父组件：
<script>
import { provide, ref, reactive, readonly } from 'vue' // 需要引入provide
export default {
setup() {
const user = ref('张三') // 非引用类型的响应式ref写法
// const user = ref({name: '张三'}) // 引用类型的响应式ref写法 user.value.name调用
// const user = reactive({name: '张三'}) // 引用类型的响应式reactive写法， user.name调用
// const user = '张三' // 非响应式写法
provide('user', readonly(user)) // readonly是为了防止inject端修改数据影响到provide端
}
}
</script>
后代组件：
<template>
<div>{{user}}</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const user = inject('user')
return { // 注意，在setup中定义的值需要return出去才能在子组件中直接使用
user
}
}
}
</script>
注意：setup 中不能使用 this。因为 setup 的调用是在 data、computed、methods 之前，所以this取不到组件的变量。
