如何在Vue中动态修改@click绑定的触发方法

你之前的写法不生效的原因：将存储方法名的字符串变量直接绑定给@click时，Vue只会执行这个变量表达式返回字符串，不会自动匹配methods中的对应方法执行，因此不会触发预期逻辑。

方案1：通过方法名字符串动态调度（无需修改现有逻辑，仅调整绑定写法） #

这种方案最贴合你现有写法，不用修改TypeScript逻辑，仅改HTML模板的点击绑定即可：

<button @click="$options.methods[methodToExecute]()"></button>

你原有data中存储方法名字符串、切换methodToExecute值的逻辑完全不用改动，点击时Vue会自动从methods对象中找到对应名称的方法执行。

方案2：直接存储函数引用（更直观，性能更好） #

如果你不需要存字符串，直接在data中存方法的引用即可：

模板修改： #

<button @click="methodToExecute()"></button>

TypeScript代码修改： #

import Vue from 'vue'

const myApp = new Vue({
    data() {
        return {
            // 直接存方法引用，不要加括号
            methodToExecute: this.doNothing,
        };
    },
    methods: {
        doNothing() {
            console.log("Doing nothing...")
            // 切换时直接赋值为目标方法引用即可
            this.methodToExecute = this.doSomethingElse
        },
        doSomethingElse() {
            console.log("Doing something else...")
        },

    },
});

myApp.$mount("#app");

方案3：完全模拟原生DOM操作绑定事件（和原生JS用法一致） #

如果你需要完全和原生JS一样编程式增删事件监听，可以通过ref获取DOM实例操作：

模板加ref属性： #

<button ref="myBtn"></button>

操作事件的代码示例： #

// 移除旧监听
(this.$refs.myBtn as HTMLElement).removeEventListener('click', this.oldMethod)
// 绑定新监听
(this.$refs.myBtn as HTMLElement).addEventListener('click', this.newMethod)

注意：该方案脱离了Vue的事件管理体系，需要你自行在组件销毁前移除绑定的事件，否则会出现内存泄漏问题，非特殊场景不推荐使用。

内容的提问来源于stack exchange，提问作者kike