停止从被破坏的子组件接收事件答案

【问题标题】：Stop receiving events from destroyed child component停止从被破坏的子组件接收事件
【发布时间】：2023-04-05 18:17:02
【问题描述】：

我有一个可以动态添加子组件的父组件。

当在 mount 中添加子组件时，我会为事件注册一个监听器

EventBus.$on('content-type-saving', function() {
    logic here...
}

问题是当通过从子组件数组中删除该组件在父组件中删除它时，它甚至仍然会触发并且其中的代码运行。

如何防止这种情况发生？我试过这个

    beforeDestroy() {
      //do something before destroying vue instance
        EventBus.$off('content-type-saving')
    }

但这也为所有其他子组件关闭了该事件，因此那些仍然存在的组件将不再执行逻辑操作，因为我关闭了已销毁子组件中的事件。

我认为如果我关闭一个事件，它只会影响对该子组件的该事件的侦听，而不会影响所有子组件的事件。

如何阻止被破坏的组件对事件做出反应？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

当您仅使用事件名称调用$off 时，all listeners are removed 用于指定事件。

相反，您只想删除正在侦听的组件的事件。您的组件应如下所示：

const component = {
  methods:{
    listener(){
      //do something on event
    }
  },
  created(){
    EventBus.$on('content-type-saving', this.listener)
  },
  beforeDestroy(){
    EventBus.$off('content-type-saving', this.listener)
  }
}

这将只删除当前组件的特定监听器。

【讨论】：

对我来说最好的答案 :) 竖起大拇指！
@Bert 我必须使用相同的方法来销毁 EventBus 吗？
@AlauddinAhmed 我从来没有破坏过事件总线；如果您正在使用它，则通常在应用程序的整个生命周期中都需要它。否则，我希望正常的垃圾收集能够处理它。
这里值得注意的是，当你的监听器有一个参数时，你可以在方法中使用listener(myParam) {...}，因为它是从事件总线传递过来的

【解决方案2】：

我会想象您正在使用某种循环渲染组件，从而为它们提供某种索引。就在我的脑海中，您可以做的是将索引推送到一个数组，然后在您的 eventBus.$on 函数中测试该组件的索引是否存在于数组中（在父组件上）和如果没有，则触发逻辑。

EventBus.$emit('content-type-saving', index);

EventBus.$on('content-type-saving', function(index) {
    if(this.deletedComponentArray.indexOf(index) == -1){
        //execute logic
    }
}

这只是给猫剥皮的一种方法。我敢肯定还有其他方法可以做到这一点。

【讨论】：

【解决方案3】：

另一种不创建组件方法的解决方案

mounted(){
  const listener = () => {
    // heavy logic
  };

  EventBus.$on('content-type-saving', listener);

  this.$once("hook:beforeDestroy", () => {
     EventBus.$off('content-type-saving', listener);
  });
}

【讨论】：