Vue 中如何使用 `provide` 和 `inject` 实现跨层级组件通信

哈喽，各位小伙伴，欢迎来到我是wangfang呀的博客！我是我是wangfang呀，虽然还在编程的“菜鸟”阶段，但我已经迫不及待地想和大家分享我一路上踩过的坑和学到的小技巧。如果你也曾为bug头疼，那么你来对地方了！今天的内容希望能够给大家带来一些灵感和帮助。

前言

在 Vue.js 中，provide 和 inject 是用于在组件树中传递数据的机制，尤其适用于父组件与多个嵌套子组件之间的数据共享。它们可以帮助我们避免层层传递 props，从而简化跨层级组件的通信。特别是当数据传递涉及到多层嵌套组件时，provide 和 inject 提供了一种更加高效的方式来传递数据。

本文将介绍 provide 和 inject 的基本概念，如何在父子组件之间使用它们进行数据传递，以及如何使用 provide 和 inject 实现跨层级的组件通信。

1. `provide` 和 `inject` 的基本概念

1.1 `provide` 和 `inject` 的功能

provide：在父组件中，provide 用来提供数据，可以在父组件中声明并向下传递数据。通过 provide，父组件可以将数据提供给其所有后代组件。
inject：在子组件中，inject 用来接收数据，子组件通过 inject 获取父组件或更上层组件提供的数据。

1.2 `provide` 和 `inject` 的特点

provide 和 inject 不是响应式的，意味着它们传递的数据在变化时不会自动更新。为了实现响应式效果，需要通过 reactive 或 ref 来包装提供的数据。
provide 和 inject 不依赖于组件的层级关系，可以跨越多层组件进行数据传递，避免了逐层传递 props 的麻烦。
provide 和 inject 主要用于跨层级通信，而不是用于父子组件直接通信。如果父子组件之间的通信只需要单向传递数据，使用 props 和 events 会更加简单。

2. 父组件提供数据：使用 `provide` 向下传递数据

在父组件中，我们使用 provide 来提供数据。provide 可以在父组件的 setup 函数中使用，或者在 data 中声明。

2.1 示例：使用 `provide` 提供数据

2.1.1 示例：在 `setup` 中使用 `provide`

<template><div>Parent Component<Child /></div>
</template><script>
import { provide, ref } from 'vue';
import Child from './Child.vue';export default {components: {Child},setup() {const message = ref('Hello from Parent!');// 使用 provide 向下传递数据provide('message', message);return {message};}
};
</script>

在这个示例中：

父组件通过 provide('message', message) 向下提供了 message 数据。
这个数据可以被任何子组件使用 inject 获取。

2.2 使用 `provide` 在 `data` 中提供数据

<template><div>Parent Component<Child /></div>
</template><script>
import { ref } from 'vue';
import Child from './Child.vue';export default {components: {Child},data() {return {message: 'Hello from Parent!'};},provide() {return {message: this.message};}
};
</script>

在这个示例中：

provide() 方法返回一个对象，用于提供父组件的数据。
message 被提供给所有子组件。

3. 子组件注入数据：使用 `inject` 接收数据并使用

在子组件中，我们使用 inject 来接收父组件提供的数据。

3.1 示例：在 `setup` 中使用 `inject`

3.1.1 示例：在子组件中使用 `inject` 获取数据

<template><div><h2>Child Component</h2><p>{{ message }}</p></div>
</template><script>
import { inject } from 'vue';export default {setup() {// 使用 inject 获取父组件提供的数据const message = inject('message');return {message};}
};
</script>

在这个示例中：

子组件通过 inject('message') 获取父组件通过 provide 提供的数据。
message 是父组件传递的数据，可以在子组件中直接使用。

3.2 示例：注入的默认值

inject 还支持设置默认值。如果父组件没有提供数据，子组件会使用默认值。

<script>
import { inject } from 'vue';export default {setup() {// 使用 inject 获取数据，设置默认值const message = inject('message', 'Default Message');return {message};}
};
</script>

在这个示例中：

如果父组件没有通过 provide 提供 message，子组件会使用 'Default Message' 作为默认值。

4. 示例：使用 `provide` 和 `inject` 进行跨层级组件通信

provide 和 inject 不仅可以用来传递父子组件之间的数据，还可以跨越多层组件进行通信。这对于中间层组件不需要关心的情况非常有用。

4.1 示例：跨层级组件通信

假设我们有一个层级较深的组件结构，我们可以通过 provide 和 inject 在顶层和底层组件之间进行通信。

4.1.1 顶层组件（父组件）

<template><div>Top Level Component<MiddleComponent /></div>
</template><script>
import { provide, ref } from 'vue';
import MiddleComponent from './MiddleComponent.vue';export default {components: {MiddleComponent},setup() {const message = ref('Hello from Top Level!');// 使用 provide 提供数据provide('message', message);return { message };}
};
</script>

4.1.2 中间组件

<template><div><h2>Middle Level Component</h2><BottomComponent /></div>
</template><script>
import BottomComponent from './BottomComponent.vue';export default {components: {BottomComponent}
};
</script>

4.1.3 底层组件（子组件）

<template><div><h3>Bottom Level Component</h3><p>{{ message }}</p></div>
</template><script>
import { inject } from 'vue';export default {setup() {// 使用 inject 获取顶层组件提供的数据const message = inject('message');return { message };}
};
</script>

在这个示例中：

顶层组件通过 provide 提供了 message 数据。
中间组件不需要关心 message，它只是作为容器将数据传递给底层组件。
底层组件通过 inject 获取到顶层组件提供的 message 数据，并渲染它。

5. 总结

provide 和 inject 是 Vue 中用于跨层级组件通信的机制，能够让你避免通过逐层传递 props 来传递数据，特别适用于嵌套层级较深的组件。
provide 用于在父组件中提供数据，inject 用于在子组件中接收数据。
inject 支持默认值，如果父组件没有提供数据，子组件会使用默认值。
跨层级组件通信：provide 和 inject 允许跨越多层组件进行数据传递，简化了组件之间的数据共享。