Shopware 6 Vue递归组件数据传递：EventBus或全局变量可行吗？

针对Shopware 6后台插件中递归Vue组件的数据传递问题，以下几种方法可以解决子组件数据直达最外层的需求：

1. 修正事件冒泡传递（无需额外工具） #

你当前代码中存在一个明显问题：递归组件绑定事件时，@transferCatId="transferCatId()"会直接执行函数且丢失参数，导致数据无法正确向上传递。修正后可以通过层层emit事件实现传递：

子组件方法修改 #

methods: {
  transferCatId(id) {
    // 触发事件并传递ID给直接父组件
    this.$emit('transferCatId', id);
  }
}

递归模板事件绑定修正 #

将递归组件的事件绑定改为传递参数的形式，确保每一层都把事件向上转发：

<partscout-categorie-tree
  :class="{'partscout-categorie-tree-list' : isFolder}"
  v-for="(child, index) in item.subFolder"
  @transferCatId="(id) => $emit('transferCatId', id)"
  :item="child">
</partscout-categorie-tree>

这样最外层组件只需监听transferCatId事件，就能拿到任意子组件传递的ID。

2. 事件总线（EventBus）正确实现 #

如果你想用EventBus，之前的失败大概率是因为监听/触发的写法有误，正确步骤如下：

1) 创建EventBus文件 #

在插件目录新建event-bus.js：

import Vue from 'vue';
export const EventBus = new Vue();

2) 子组件触发事件 #

在递归组件的方法中导入并触发事件：

import { EventBus } from './event-bus';

methods: {
  transferCatId(id) {
    EventBus.$emit('cat-id-transferred', id);
  }
}

3) 最外层组件监听事件 #

在最外层组件中监听事件，并在销毁时移除监听避免内存泄漏：

import { EventBus } from './event-bus';

mounted() {
  EventBus.$on('cat-id-transferred', (id) => {
    // 在这里处理拿到的分类ID
    console.log('接收子组件ID:', id);
  });
},
beforeDestroy() {
  EventBus.$off('cat-id-transferred');
}

3. Provide/Inject（最适合递归场景） #

这种方法无需层层传递事件，直接让所有子组件调用最外层提供的方法，是递归组件的最优解：

最外层组件提供方法 #

provide() {
  return {
    handleCatId: (id) => {
      // 最外层处理ID的逻辑
      console.log('来自深层子组件的ID:', id);
    }
  };
}

递归子组件注入并调用 #

inject: ['handleCatId'],
methods: {
  transferCatId(id) {
    // 直接调用最外层提供的方法
    this.handleCatId(id);
  }
}

4. 全局变量（不推荐） #

全局变量虽然能实现，但容易污染状态且不利于维护，仅作备选：
在插件入口文件中挂载全局变量：

import Vue from 'vue';
Vue.prototype.$categoryStore = {
  currentId: null,
  updateId(id) {
    this.currentId = id;
    // 可选：结合EventBus触发状态变化通知
    Vue.prototype.$eventBus.$emit('cat-id-updated', id);
  }
};

子组件调用：

transferCatId(id) {
  this.$categoryStore.updateId(id);
}

最外层监听变化：

mounted() {
  this.$eventBus.$on('cat-id-updated', (id) => {
    // 处理更新后的ID
  });
}

内容的提问来源于stack exchange，提问作者ollo182