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

Posted 2023-02-22

【中文标题】如何在 jquery 事件中调用 vue 方法？

【英文标题】：How to call vue methods inside jquery event?

【发布时间】：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 框架。

【参考方案1】：

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

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

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