我正在尝试学习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>