停止从销毁的子组件接收事件 [英] Stop receiving events from destroyed child component

问题描述

我有一个父组件，我可以在其中动态添加子组件.

I have a parent where I can dynamically add child components into.

在挂载中添加子组件时，我会为事件注册一个侦听器

When child component is added in mount I register a listener for an event

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

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

Problem is when that component is deleted in the parent by removing it from the array of child components, that even still fires and code inside of it is run.

我怎样才能防止这种情况发生?我试过了

How can I prevent this from happening? I tried this

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

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

but that turned off that event for all other child components as well so those that were still live would not do logic stuff anymore because I turned off event in destroyed child component.

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

I thought if I turned off an event it would only affect listening for that event for that child component and not turn the event for all child components.

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

How can I stop destroyed components from reacting on events?

推荐答案

当你只使用事件名称调用 $off 时，所有 侦听器都被移除，用于指定的事件.

When you call $off with just the name of the event, all listeners are removed for the event specified.

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

Instead, you want to remove the event only for the component that is listening. your component should look something like this:

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

这将仅删除当前组件的特定侦听器.

This will remove only the specific listener for the current component.

这篇关于停止从销毁的子组件接收事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！