如何订阅 Vue 指令中的自定义事件？答案

【问题标题】：How do I subscribe to a custom event in a Vue directive?如何订阅 Vue 指令中的自定义事件？
【发布时间】：2020-06-19 12:36:24
【问题描述】：

我想构建一个 vue 指令来监听 vue-components 发出的带有$emit 的自定义事件，然后对事件做出反应。像这样的：

<some-component v-my-custom-directive-on:click="someData">
...
</some-component>

很遗憾，我不确定该怎么做。我尝试使用：

bind: function (el, binding, vnode) {
    vnode.context.$on(binding.arg, data => { ... });
}

但永远不会调用事件处理程序。

有什么帮助吗？

【问题讨论】：

我认为您将 custom events 与 custom directives 混淆了。你到底想达到什么目的？自定义点击处理程序？
不会混淆任何东西。我想订阅“自定义指令”中的“自定义事件”。想象一下像日志记录/跟踪助手之类的东西。在选定的组件上，我想附加一个指令，例如：v-trace-on:click="Element was clicked"。指令似乎是一种很好的方法。
仍然不明白为什么你需要一个自定义指令。如果您想要一个全局事件处理程序，请查找vue event bus，但仅用于日志记录，可用工具在那里（console.debug/log/error/dir/group 和 vue devtools）。请记住，不建议在客户端存储和处理日志。

【解决方案1】：

您可以通过使用“componentInstance”来实现这一点

例如

bind: function (el, binding, vnode) {
    vnode.componentInstance.$on('name of your emitted event', data => { ... });
}

【讨论】：