javascript - 在删除组件之前删除事件侦听器

Question

关于此解决方案的问题： 在鼠标悬停时动态添加和删除类 - Vue.js

该指令工作正常，谢谢！但是当我在某个被销毁的组件上使用它时（使用悬停可见按钮从它的父数组中删除），我收到一个错误：

[Vue 警告]：指令 add-class-hover unbind hook 中的错误：“TypeError：无法在 'EventTarget' 上执行 'removeEventListener'：需要 2 个参数，但只有 1 个存在。”

这是有道理的，因为取消绑定发生在组件部分被移除之后（因为不再检测到悬停）。

如何删除此绑定，使控制台保持非红色？beforeDestroy 似乎不适用于指令。那么是否有一个技巧可以称为“删除组件的所有侦听器及其子级”。

标签： javascriptvue.jsdom-eventsvue-directives

Answer 1

在 Vue.js 中

通过价值event。null

Vue.directive('add-hover-class', {
  bind(el, binding, vnode) {
    const {
      value = ""
    } = binding;
    el.addEventListener('mouseenter', () => {
      el.classList.add(value)
    });
    el.addEventListener('mouseleave', () => {
      el.classList.remove(value)
    });
  },
  unbind(el, binding, vnode) {
    el.removeEventListener('mouseenter', null);
    el.removeEventListener('mouseleave', null);
  }
})