`provide` 和 `inject` 组件通讯：实现跨组件层级通讯

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在 Vue3 中，provide 和 inject 是用于实现跨组件层级通讯的 API。

provide

provide 允许一个祖先组件向其所有子孙组件注入一个值，不论组件层次有多深，并在起始和终点组件中使用。

使用 provide

import { provide } from 'vue';export default {
setup() {
const sharedState = reactive({ message: 'Hello from ancestor' });// 提供 sharedState 给所有子孙组件
provide('sharedState', sharedState);
}
};

inject

inject 允许后代组件接收祖先组件通过 provide 提供的值。

使用 inject

import { inject } from 'vue';export default {
setup() {
// 注入祖先组件提供的 sharedState
const sharedState = inject('sharedState');return {
sharedState
};
}
};

特点

• 跨层级通讯：provide 和 inject 可以实现跨多个层级的组件通讯。
• 解耦：使用 provide 和 inject 可以减少组件之间的直接依赖，使得组件更加独立和可复用。
• 响应式：通过 provide 提供的响应式数据，注入的组件也能响应数据的变化。

注意事项

• provide 和 inject 主要用于解决多层级组件间的状态共享问题，不应该滥用，以避免造成难以理解和维护的状态管理。
• 提供的数据默认是响应式的，如果不需要响应式，可以使用 readonly 包装。

总结

provide 和 inject 是 Vue3 中用于实现跨组件层级通讯的强大工具。它们提供了一种简洁的方式来共享状态，避免了 props 层层传递的繁琐。合理使用 provide 和 inject 可以提高组件的复用性和可维护性。