听说 Vue 3 加入了超多酷炫的新功能，比如组合式 API 等等。今天我们就来聊聊 Vue 3 中的组合式 API，并且如何使用 provide/inject 来搞定它！
首先，我们来了解一下组合式 API 是什么。其实，组合式 API 就是一个用来构建和组合函数的工具，它能让我们的代码更加简洁、可读性更高，还能提高我们的工作效率！
那么，我们该怎么使用 provide/inject 呢？其实，provide 和 inject 是两个相对应的方法，它们可以用来在父组件和子组件之间传递数据。
我们先来看一下 provide 的使用方法。在 Vue 3 中，provide 可以这么用：
// 在父组件中提供数据
provide: {
foo: 'foo',
bar: 'bar'
}
这样，我们就可以在子组件中通过 inject 来获取父组件提供的数据了！
接下来，我们来看一下 inject 的使用方法。在 Vue 3 中，inject 可以这么用：
// 在子组件中注入数据
inject: ['foo', 'bar']
这样，我们就可以在子组件中使用 foo 和 bar 数据了！是不是很简单呢？
当然，我们也可以在 provide 和 inject 中使用默认值，这样如果父组件没有提供数据，子组件也可以正常工作。比如：
// 在父组件中提供数据，并设置默认值
provide: {
foo: 'foo',
bar: 'bar',
baz: 'baz'
},
// 在子组件中注入数据，并设置默认值
inject: ['foo', 'bar', 'baz'],
default: {
baz: 'default-baz'
}
这样，如果父组件没有提供 baz 数据，子组件就会使用默认值 default-baz。
最后，我们来看一下如何在组件中使用 provide/inject。比如，我们有一个父组件和一个子组件：
<!-- Parent.vue -->
<template>
<div>
<Child></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child,
},
provide() {
return {
foo: 'foo',
bar: 'bar',
};
},
};
</script>
<!-- Child.vue -->
<template>
<div>
<p>{
{ foo }}</p>
<p>{
{ bar }}</p>
</div>
</template>
<script>
export default {
inject: ['foo', 'bar'],
};
</script>
这样，我们就可以在子组件中使用 provide 提供的数据了！是不是很简单呢？
总之，provide/inject 是 Vue 3 中非常有用的功能，可以帮助我们在父组件和子组件之间传递数据。如果你还没有尝试过，不妨赶紧去试试吧！
当然，provide/inject 还可以用在兄弟组件之间传递数据。比如，我们有三个兄弟组件：A、B、C。A 组件需要向 B 组件和 C 组件传递数据，可以使用 provide 方法提供数据，然后在 B 组件和 C 组件中使用 inject 方法注入数据。
// 在 A 组件中提供数据
provide: {
foo: 'foo',
bar: 'bar'
},
// 在 B 组件和 C 组件中注入数据
inject: ['foo', 'bar'],
这样，B 组件和 C 组件就可以通过 foo 和 bar 数据获取到 A 组件提供的数据了。
总之，provide/inject 是 Vue 3 中非常有用的功能，可以帮助我们在组件之间传递数据。无论是在父组件和子组件之间，还是在兄弟组件之间，都可以使用 provide/inject。如果你还没有尝试过，不妨赶紧去试试吧！
除此之外，provide/inject 还可以用于组件之间的递归调用。比如，我们有一个树形结构的数据，每个节点都包含一个子节点数组和一个递归调用函数。我们可以在每个节点组件中使用 provide 方法提供数据，然后在子节点组件中使用 inject 方法注入数据，这样就可以实现递归渲染整个树形结构了。
// 在父节点组件中提供数据
provide: {
foo: 'foo',
bar: 'bar',
childNodes: [
{
id: 1,
name: 'Node 1',
childNodes: [
{
id: 2,
name: 'Node 1-1',
},
{
id: 3,
name: 'Node 1-2',
},
],
},
{
id: 4,
name: 'Node 2',
childNodes: [
{
id: 5,
name: 'Node 2-1',
},
{
id: 6,
name: 'Node 2-2',
},
],
},
],
},
// 在子节点组件中注入数据
inject: ['foo', 'bar'],
这样，我们就可以在子节点组件中使用 provide 提供的数据，并且递归调用子节点组件来渲染整个树形结构了。
总之，provide/inject 是 Vue 3 中非常强大的功能，可以帮助我们在组件之间传递数据，并且可以实现递归渲染树形结构等复杂的场景。如果你还没有尝试过，不妨赶紧去试试吧！