provide 和 inject

何为 provide / inject

provide/inject 是 Vue 在 2.2.0 版本新增的 API。

官方解释

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

简单理解

provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

示例

定义一个 say 组件

<template>
	<div>说话内容 : {{what}} ...</div>
</template>
<script setup>
import { inject } from 'vue'
// 两个参数：需要inject的属性名，默认值（可选）
const what = inject('what', '---');
</script>

调用 say 组件

<template>
	<say></say>
</template>
<script setup>
import { provide } from 'vue';
provide('what','您好');
</script>

数据响应式

为了增加 provide 值和 inject 值之间的响应性，我们可以在 provide 值时使用 ref 或 reactive。

响应式示例

组件.vue

<template>
	<div>说话内容 : {{what}} ...</div>
</template>
<script setup>
import { inject, onMounted } from 'vue'
// 两个参数：需要inject的属性名，默认值（可选）
let what = inject('what', '---');
onMounted(()=>{
	setTimeout(()=>{
		what.value = 'holl'
	},2000);
});
</script>

调用组件

<template>
	<say></say>
</template>
<script setup>
import { provide, ref } from 'vue';
const whatContent = ref('您好');
provide('what', whatContent);
</script>