随着 Vue3 的正式发布，越来越多的开发者开始转向使用 Vue3，在 Vue3 中，provide 和 inject 函数被引入为了提供更方便的高级组件通信方式。本文将详细介绍这两个函数的使用方法和使用场景。
一、provide 函数
在 Vue2 中，我们常常使用 props 和 event 这两种方式进行组件之间的通信，然而在某些情况下，这两种方式并不能满足我们的需求。如何在组件树中高效地传递数据呢？这时，provide 函数就派上用场了。
provide 函数的主要作用是使指定的组件注册一个传递数据的方法，使其子组件可以轻松地访问到该数据。provide 函数接收一个函数或对象作为参数，该函数或对象会被注册到当前组件的 provide 对象中：
export default {
provide: {
msg: 'Hello World!'
},
}上例中，我们利用 provide 函数将一个名称为 msg 的数据注册为一种可以在组件树中共享的变量。子组件可以在自己的对象中使用 inject 函数来访问该数据。
二、inject 函数
inject 函数与 provide 函数相对应，它的作用是使指定的子组件从父组件的 provide 中获取数据。inject 函数接收一个数组作为参数，其中数组的每一项为与 provide 函数中定义的数据名称相相同的字符串：
export default {
inject: ['msg']
}代码中的 inject 属性表示子组件期望从父组件中注入名称为 msg 的数据。这样，msg 数据就能被子组件轻松地访问到。
需要注意的一点是，inject 函数只想在当前组件的父组件的 provide 对象中查找数据，因此只有在父组件中注册的变量才能被子组件注入。
三、provide 和 inject 的使用案例
下面我们通过一些实例来进一步了解 provide 和 inject 函数的应用场景。
<!-- GrandParent.vue -->
<template>
<div>
<h2>IndexedDB in Vue 3 with Provide/Inject</h2>
<button @click="addItem">Add Item</button>
<p>Number of Items: {{ itemCount }}</p>
<Parent />
</div>
</template>
<script>
import Parent from './Parent.vue';
export default {
components: {
Parent,
},
setup() {
const db = {
name: 'vue3-IndexedDB-demo',
version: 1,
instance: null,
};
const request = indexedDB.open(db.name, db.version);
request.onerror = (event) => {
console.error(`Database error: ${event.target.errorCode}`);
};
request.onsuccess = (event) => {
db.instance = event.target.result;
};
const provideValues = {
db,
items: [],
incrementItems: function () {
this.items.push({});
},
};
return {
provideValues,
itemCount: computed(() => {
return provideValues.items.length;
}),
addItem: function () {
provideValues.incrementItems();
},
};
},
};
</script>在上述示例中，我们看到 indexedDB 被定义在 GrandParent 组件中，我们希望让 Parent 和 Child 都能访问到这个实例，这是我们在 GrandParent 组件中定义并提供了一个包含这个实例和其他相关数据的对象。
<!--Parent.vue-->
<template>
<div>
<h3>Parent</h3>
<p>Parent's number of items: {{ itemCount }}</p>
<Child />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child,
},
inject: ['db'],
computed: {
itemCount() {
return this.db.items.length;
},
},
};
</script>在 Parent 组件中，我们在 inject 中引入了 GrandParent 组件中使用 provide 函数提供的 db 数据。由于在 GrandParent 中 provideValues 对象中也包含着items属性，我们就可以在 Parent 的计算属性中轻松的获取到 items 属性的状态。
<!--Child.vue-->
<template>
<div>
<h4>Child</h4>
<p>Child's number of items: {{ itemCount }}</p>
</div>
</template>
<script>
export default {
inject: ['db'],
computed: {
itemCount() {
return this.db.items.length;
},
},
};
</script>在 Child 组件中，我们同样通过 inject 函数将 db 数据注入，在计算属性中同样获取到了 items 数据。
注意：上述示例中使用了 Vue3 的 Composition API 风格，不过提供和注入数据的方式不受 Composition API 的影响。如果您想使用 Vue2 风格的写法，只需要将示例代码中的 setup 函数改为正常的 Vue2 的方式即可。
总结
如果您的应用程序需要使用一些全局状态或对象，那么使用提供程序/注入组件是一个很好的选择，它可以让子组件轻松使用父组件中的数据。提供程序和注入函数相当于一个高级的prop和event方式，它通过组件整个树避免了通过上级链传递props。然而，这并不意味着在任何情况下它都是一个正确的选择，您应该根据您的应用程序的需求来决定是否使用它。
