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

Question

在指令绑定(bind)上，我创建了一个事件“validate”的监听器以运行函数 updateMessage:

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

当我取消绑定(bind)指令时，如何删除或覆盖它？

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)
     },
    }
  },

Answer 1

要删除这个特定的事件处理程序，您需要存储对处理程序函数的引用。您也需要为您的输入 事件处理程序执行相同的操作。

例如(假设 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关于在元素上存储函数的想法。