Vue 两次使用相同的指令答案

【问题标题】：Vue using the same directive twiceVue 两次使用相同的指令
【发布时间】：2019-12-07 05:09:56
【问题描述】：

当用户点击退出时，我有全局指令来隐藏模式：

Vue.directive('click-outside', {
  bind(el, binding, vNode) {
    el.clickOutside = event => {      
      if (!(el == event.target || el.contains(event.target))) {
            vNode.context[binding.expression](event);
            event.stopPropagation();
        }
    }
    document.body.addEventListener('click', el.clickOutside)
  },
  unbind(el) {
    document.removeEventListener('click', el.clickOutside)
    el.clickOutside = null
  }
});

接下来我使用了这个指令：

<img src="noti.png" id="1" v-click-outside="onClickOutside('notification')">

<img src="dots.png" id="2" v-click-outside="onClickOutside('profile')">

我有问题，因为我不能在一个组件上使用相同的指令。 Vue 返回我的错误：

vNode.context[binding.expression] is not a function

我找到了这个query，但答案对我没有帮助。当将console.log 添加到指令并单击例如第一个img 指令时，将执行两次。

我如何检测（在指令中）点击了哪个img？

【问题讨论】：

您正在检查相反的操作 - 未点击 img。要捕获 img 点击事件，只需使用 v-on:click
仅供参考，你不需要做` el == event.target` 和el.contains(event.target)，你可以使用contains()，因为给定的后代会返回true包括自身的节点developer.mozilla.org/en-US/docs/Web/API/Node/contains.

标签： javascript vue.js directive

【解决方案1】：

当模板被渲染时，你传递给自定义指令的值将被立即评估。这与 v-on 不同，后者具有 Vue 模板编译器的特殊行为，它会自动将其包装在一个函数中。

我在this answer 中更详细地解释了这一点。

我不知道这是否会完全解决您的问题，但至少您需要这样做：

<img src="noti.png" id="1" v-click-outside="() => onClickOutside('notification')">

【讨论】：