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

我在想的模板。

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

问题是我不知道如何在自定义指令中捕获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>

谁能帮助我了解其运作方式?我没有找到类似例子的任何例子。

最佳答案

经过更多搜索后,我得出了以下解决方案:

<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>

07-24 16:20