如何修复我的简单自定义 v-on 指令，该指令不会立即执行方法?

Question

我在这里寻求一些帮助，为什么我的自定义指令无法正常工作。我正在尝试创建自己的 v-on(名为 v-myOn)指令，该指令只会在单击文本时更改文本的背景颜色。问题是该方法在 vue js 应用程序启动时立即执行(这意味着元素背景已经具有颜色样式)，而不是在某个事件发生时(即单击元素时)。提前感谢！

更新：正如菲尔所说，问题是我直接在模板中执行函数。但在这种情况下，我试图将参数传递给方法changeColor。那么我如何在能够传递参数的同时阻止它执行呢？

这是我在 App.vue 中的代码：

<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1 v-myOn:click="changeColor('blue')" :style="{background:  color}" ref="heading">Directives Exercise</h1>
<!-- Exercise -->
<!-- Build a Custom Directive which works like v-on (Listen for Events) -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return{
color: ''
}
},

directives: {
myOn : {
bind(el, binding, vnode) {
el.addEventListener(binding.arg, binding.value)
}
}
},
methods: {
changeColor(color)
{
this.color = color;
}
}
}
</script>
<style>
</style>

Answer 1

你必须包装在一个arrow function否则它会立即被执行，正如你所发现的和@Phil指出的那样。

<h1 v-myOn:click="() => changeColor('blue')" :style="{background:  color}" ref="heading">Directives Exercise</h1>