vue3.x之依赖注入

我们在使用vue3的时候常常使用props给父组件传值，但是在某些场景下，使用props传值会非常复杂，比如我们需要给某个子组件传值，同时这个子组件的某个隔了好几代的后代组件也需要使用到props里的某个属性，如果使用props来传递组件的话，需要按照父子关系一代代地写，这样很麻烦，而且容易传错。这时候使用vue3的依赖注入就非常好用了。

依赖注入

依赖注入指的是provide和inject这一对函数。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

提供依赖Provide

要为组件后代提供数据，需要使用到 provide()函数。

import { provide, onMounted } from 'vue';
provide('info', 'hi');

provide接收两个参数，分别对应key-value.其中key表示注入名，value表示提供的值。

📢 注入依赖不仅可以写在组件中，也可以写在App.vue中，如果写在组件中，那么它的后代组件都可以注入使用。如果写在App.vue中，那么所有的组件都可以使用。

写在App.vue中

import { createApp } from 'vue';
const app = createApp({});
app.provide('info', 'hi')

注入inject

要注入上层组件提供的数据，需使用 inject()函数

<template>
  <div class="test-wrapper">
    注入信息: {{infoVal}}
  </div>
</template>

<script setup>
import { inject } from 'vue';
//1.注入需要的属性
const infoVal = inject('info');
</script>

效果如下：

inject接收一个参数key，也就是provide函数中提供依赖的key。为了避免假如provide函数中没有这个提供依赖的key出错的情况，我们可以定义一个默认值。

import { inject } from 'vue';
const infoVal = inject('info', '默认info');

注入响应式数据

在实际开发项目的过程中，我们依赖注入的一般是响应式数据，为了更好地维护数据，我们一般只在提供依赖的组件中修改响应式数据，在注入的组件中是不会主动去修改响应式数据的。

⏰ 提供依赖

import HelloWorld from './components/HelloWorld.vue'
import { provide, ref, onMounted } from 'vue';
//1.定义响应式数据
const location = ref('North Pole')
//2.自定义函数
function updateLocation() {
  location.value = 'South Pole'
}
//3.提供依赖
provide('location', {
  location,
  updateLocation
})

⏰ 注入

<template>
  <div class="test-wrapper">
    注入信息: {{location}}
    <button @click="updateLocation" v-preReClick>点我点我</button>
  </div>
</template>

<script setup>
import { inject } from 'vue';
const { location, updateLocation } = inject('location');
</script>

效果如下：

 

点击之后的效果如下：