跨组件通信（非爷孙）

Question

一个页面中包含左侧树控件 右侧el-table控件 其中右侧列表内容是根据左侧树节点去查询的内容 现在去删除，新增或者转移右侧表格的内容并保存的时候 期待左侧树的统计数量也能随之改变 左侧树是根据后端接口返回的统计数据 这里想在右侧表格新增，删除或者转移组件中去调用到左侧树控件的调用接口重新渲染的方法

这里楼主试用provide和inject 依赖注入的办法 可是会提示注入的函数not a function 这里在右侧表格新增，删除或者转移组件调用inject（‘updateTree’）在左侧树组件中provide（‘updateTree’，updateTree）
有什么更好的解决方案吗 楼主写的项目是vue3

Answer 1

引自免费微信小程序：皆我百晓生

在Vue 3中处理跨组件通信的问题，尤其是当涉及到非父子组件间的通信时，有多种策略可以采用。根据你的描述，使用provide和inject确实是一种方法，但在这里似乎遇到了问题。以下是一些建议的解决方案：

1. 使用全局状态管理

你可以使用Vue 3的reactive或ref来创建一个全局状态，这个状态可以在整个应用中被访问和修改。左侧树组件和右侧表格组件都可以访问这个状态，当右侧组件进行操作时，可以通过修改这个状态来通知左侧组件更新。例如：

import { reactive } from 'vue';

const state = reactive({
  treeData: [], // 树的数据
  tableData: [] // 表格的数据
});

然后你可以在左侧树组件和右侧表格组件中使用computed属性来响应这个状态的变化。当状态变化时，组件会自动重新渲染。你也可以在右侧组件的方法中直接修改这个状态。

2. 使用事件总线（Event Bus）

事件总线是一种简单的跨组件通信方式。你可以创建一个事件总线，然后在需要通信的组件间进行事件的触发和监听。在左侧树组件中，你可以触发事件并传递数据，右侧表格组件监听这些事件并作出响应。使用Vue 3的provide和inject可以实现这一目的。例如：

// 创建一个事件总线
const eventBus = new Vue({
  provide: {
    $EventBus: this // 提供事件总线实例
  }
});

// 在左侧树组件中触发事件
this.$EventBus.$emit('treeUpdated', newData); // newData是更新后的树数据

// 在右侧表格组件中监听事件
const updateTree = inject('$EventBus'); // 获取事件总线实例的代理对象
updateTree.$on('treeUpdated', (newData) => { /* 更新表格数据 */ }); // 响应树数据更新事件

3. 使用Vuex（如果需要更复杂的状态管理）

如果你的应用状态管理非常复杂，可能需要使用Vuex来进行更细致的状态管理。Vuex允许你在一个集中的存储中管理应用的所有组件的状态。左侧树组件和右侧表格组件都可以通过这个存储来读取和修改状态。你可以定义actions、mutations和getters来处理状态的更改和读取。这是比较推荐的做法，尤其是在大型项目中。不过需要注意Vuex可能会增加一定的复杂性和学习成本。如果你的项目不是很大，也许直接使用全局状态管理就足够了。此外你还可以探索第三方状态管理库如Pinia等适合Vue 3的选择。针对你的问题，"Provide/Inject"并不是最优解因为它们的局限性使得在处理复杂的跨组件通信时可能出现一些问题。在Vue社区内被广泛推崇的解决方案更倾向于使用全局状态管理或Vuex来进行状态管理和组件间的通信。"Event Bus"也是一个选择，但可能会使代码更难维护和理解。同时确保你正确处理了异步操作以确保数据的准确性。"跨组件通信的最佳实践取决于项目的规模和复杂性。" 在大型项目中通常推荐使用Vuex这样的状态管理库来处理复杂的跨组件通信和数据管理。希望这些建议能对你有所帮助！如果还有其他问题，欢迎继续提问。