vue3跨组件通信孙传祖

Vue3 中后代与祖先组件间的通信
在 Vue3 中实现后代到祖先组件的通信可以通过多种方式完成，这里介绍两种常用的方式：Provide/Inject 和全局事件总线。
Provide/Inject 实现跨层级通信
provide 和 inject 是一种用于祖代向后代传递属性的方法，在多层嵌套的情况下尤为有用。这不仅限于直接的父子关系，而是可以跨越多个层次来共享状态或函数[^1]。
// 祖先组件 (Grandparent.vue)
export default {
setup() {
const message = "Hello from grandparent!";

provide('sharedMessage', message);

return {};
}
}
登录后复制
<!-- 子孙组件 (Descendant.vue) -->
<script>
import { inject } from 'vue';

export default {
setup() {
const sharedMessage = inject('sharedMessage');

console.log(sharedMessage); // 输出: Hello from grandparent!

return { sharedMessage };
}
};
</script>

<template>{{ sharedMessage }}</template>
登录后复制
这种方法减少了组件之间的耦合度，并且不会受到中间组件的影响。
使用全局事件总线(Event Bus)
另一种解决方案是创建一个独立的对象作为事件中心，任何组件都可以订阅该对象上的特定事件并触发相应的逻辑。对于大型项目来说，建议使用 Vuex 或 Pinia 这样的状态管理库；但对于简单的场景下，事件总线是一个轻量级的选择[^2]。
// eventBus.js
import { createApp, reactive } from 'vue';
const app = createApp({});

export const EventBus = new app.config.globalProperties.$bus();
登录后复制
// 后代组件内发出事件
EventBus.emit('custom-event-name', payload);
登录后复制
// 祖先或其他监听者组件中捕获事件
EventBus.on('custom-event-name', handlerFunction);
登录后复制
这两种方法都能有效地解决后代至祖先的信息传递需求，具体选择取决于应用场景和个人偏好。