如何捕获点击事件在自定义指令上的Vue.js?

Question

我正在尝试学习Vue.js，并来到了一个实践示例，在这个示例中，我需要实现一个自定义指令，而该指令在“v-on”中起作用。这意味着我需要捕获自定义指令上的click事件并调用一个方法。

我想到的模板。

<template>
    <h1 v-my-on:click="alertMe">Click</h1>
</template>

问题是我不知道如何在custom指令中捕获click事件。请原谅下面的笨拙代码。

<script>
    export default {
        methods: {
            alertMe() {
                alert('The Alert!');
            }
        },
        directives: {
            'my-on': {
                bind(el, binding, vnode) {
                    console.log('bind');

                    el.addEventListener('click',()=>{
                        console.log('bind');
                        vnode.context.$emit('click');
                    });
                },

            }
        }
    }
</script>

有人能帮我理解这是怎么回事吗？我没有找到任何类似的例子。

Answer 1

据我所知，你找到的解决方案是你所寻找的最好的解决方案。然而，对于那些不太了解Vue的人来说。JS：我想我应该给一个简短的解释。我还建议您查看自定义指令的官方Vue留档或我关于这些概念的媒体文章。

这是Vlad制定的代码，我支持：

<template>
    <h1 v-my-on:click="alertMe">Click me!</h1>
</template>

<script>
    export default {
        methods: {
            alertMe() {
                alert('The Alert!');
            }
        },
        directives: {
            'my-on': {
                bind(el, binding) {
                    let type = binding.arg;
                    let myFunction = binding.value;
                    el.addEventListener(type, myFunction);
                }
            }
        }
    }
</script>

简而言之，基于指令对象定义，Vue指令是根据附加到它们的元素的生命周期调用的。在示例中，定义的函数被称为“绑定”，因此当元素绑定到DOM时，指令将调用该函数。

此函数接收附加到“el”的元素以及模板“binding”中指令用法的不同内容。在模板的绑定用法中，冒号“：”后面的值是“arg”，在本例中是字符串文字“click”。引号''''内的值是“值”，在本例中是对函数“alertMe”的对象引用。

通过获取binding.arg和binding.value（及其各自的内容）定义的vars然后可以用于创建包含在元素el中的事件侦听器，该元素用于指令（el是可修改的）。因此，当元素被创建和绑定时，这个新的事件侦听器是在由“arg”定义的“单击”事件上创建的，它将调用由“value”定义的“alertMe”函数。

因为修改包含在元素内部，所以您不必担心取消绑定时的清理，因为当元素被销毁时，侦听器将被销毁。

这是对建议代码中发生的事情的基本描述。要了解有关指令以及如何使用它们的更多信息，请按照建议的链接进行操作。希望这有帮助！

Answer 2

您需要为指令中发出的事件注册一个侦听器。

// emit a custom event
// binding.expression is alertMe
vnode.context.$emit(binding.expression);

// listen for the event 
export default {
    created(){
        this.$on('alertMe', event => { 
            this.alertMe()
        })
    },
    ....
}

这不是调用方法alertMe，而是将alertMe作为绑定表达式传递给指令：

<h1 v-my-on:click="alertMe">Click</h1>

Answer 3

经过更多的搜索，我找到了这个解决方案：

<template>
  <h1 v-my-on:click="alertMe">Click me!</h1>
</template>

<script>

  export default {

    methods: {

      alertMe() {

        alert('The Alert!');

      }

    },

    directives: {

      'my-on': {

        // Add Event Listener on mounted.
        bind(el, binding) {
          el.addEventListener(binding.arg, binding.value);
        },

        // Remove Event Listener on destroy.
        unbind(el, binding) {
          el.removeEventListener(binding.arg, binding.value);
        }

      }

    }

  }
</script>