时间戳

首页 > 解决方案 > 如何在 Vue 指令中删除使用 vnode.context.$on 创建的事件？

vue.js - 如何在 Vue 指令中删除使用 vnode.context.$on 创建的事件？

问题描述

在指令绑定上，我为事件“验证”创建了一个侦听器以运行函数 updateMessage：

vnode.context.$on('validate', () => {
   updateMessage(el, vm);
});

取消绑定指令时如何删除或覆盖它？

directives: {
    validate: {
      bind(el, _, vnode) {
        const vm = vnode.context;
        el.addEventListener('input', e => {
                updateMessage(e.target, vm);
        });
        vnode.context.$on('validate', () => {
                updateMessage(el, vm);
        });
          console.log('bind', el)
      },
     unbind(el, _, vnode) {
        el.removeEventListener('input', e => {
                updateMessage(e.target, vm);
        });
         console.log('unbind',el)
     },
    }
  },

标签： vue.js

解决方案

要删除此特定事件处理程序，您需要存储对处理程序函数的引用。你也需要为你的输入事件处理程序做同样的事情。

例如（假设在某处updateMessage定义），将事件处理程序存储在元素实例上，以便稍后引用它们

validate: {
  bind(el, _, vnode) {
    const vm = vnode.context
    el.inputEventHandler = e => updateMessage(e.target, vm)
    el.validateEventHandler = () => updateMessage(el, vm)
    
    el.addEventListener('input', el.inputEventHandler)
    vm.$on('validate', el.validateEventHandler)
  },
  unbind(el, _, vnode) {
    el.removeEventListener('input', el.inputEventHandler)
    vnode.context.$off('validate', el.validateEventHandler)
  }
}

感谢Decade Moon关于将函数存储在元素上的想法。

推荐阅读