如何在 jquery 事件中调用 vue 方法？答案

【问题标题】：How to call vue methods inside jquery event?如何在 jquery 事件中调用 vue 方法？
【发布时间】：2020-09-01 05:16:11
【问题描述】：

我正在使用带有 webpack 的 vue。这是我的代码：

export default {
data() {
        return {
            start: true,
            logReg: false,
        }
},
methods: {
    checkLogged() {
        this.start = false;
        this.logReg = true;

    },
    closem(pathTo) {
        $('#mm').modal('hide')
        this.$router.push({ path: pathTo })

    }
},
mounted() {


    $('#mm').on('hide.bs.modal', function () {


       this.checkLogged();




    });
},
}

我试图在 jquery 事件中调用“checkLogged”方法，但它说该函数未定义。如何调用该方法？

【问题讨论】：

这里只是一个注释。您不应该将 Jquery 与任何框架混合使用。我确信有一种方法可以直接在 vue 中实现你想要做的事情。
请解释一下..
嗯 jquery 是一个非常侵入性的“框架”，大多数时候它会干扰您尝试使用的框架。最好只使用该框架支持的功能来做你想做的事情。这适用于任何 JS 框架。

标签： jquery vue.js webpack

【解决方案1】：

这是因为 function() {...} 创建了一个新的范围，因此回调中的 this 实际上不再引用 VueJS 组件，而是指向窗口对象。

你可以使用箭头函数，它不会创建自己的this绑定，而是传入词法this（即箭头函数中的this与上下文相同的this调用）：

$('#mm').on('hide.bs.modal', () => {
   this.checkLogged();
});

【讨论】：