vue.js jquery - 从 jQuery 方法访问全局函数

Posted 2023-03-14

【中文标题】vue.js jquery - 从 jQuery 方法访问全局函数

【英文标题】：vue.js jquery - access to global function from jQuery method

【发布时间】：2018-01-31 20:30:09

【问题描述】：

我正在 vue.js 中制作一个简单的 SPA 应用程序，并且我使用了一些 jQuery 方法。问题是，我不能在 jQuery 语句中使用 vue 的方法。例如：我实现了用于自动完成输入字段的 easyAutocomplete 包，需要 4 个事件：

v-on:click="addReceiver"(on button 'add') - 完成 v-on:enter="addReceiver"（在输入字段上）- 完成 点击列表项 - 完成 进入列表项 - 完成

现在我的代码（没有不必要的东西）看起来像这样：

export default 
        data() 
            return 
                contacts: [],
                receivers: []

            
        ,
        mounted() 
            this.fetchMessages();

        ,
        methods: 
            fetchMessages() 
                axios.get('api/messages').then(response => 
                    this.contacts = response.data.contacts;

                    var options = 
                        data: this.contacts,
                        getValue: "name",
                        list: 
                            match: 
                                enabled: true
                            ,
                            onClickEvent: function() 
                                var name = $("#to").getSelectedItemData().name;
                                $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");
                                //this.receivers.push(name); CANT DO THAT ALSO!!!
                            ,
                            onKeyEnterEvent: function() 
                                var name = $("#to").getSelectedItemData().name;
                                $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");
                            
                         
                    ;

                    $("#to").easyAutocomplete(options);


                );
            ,
            addReceiver()
                var name = $("#to").val();
                $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");

            
        
    

如您所见，我需要在很多地方复制我的代码，因为我不能在里面使用函数addReceiver()，例如onClickEvent: jquery list 函数。

感谢您的帮助！

【问题讨论】：

您应该能够在导出之外（在此代码开始之前）创建一个具有addReceiver 内容的命名函数，并使用此引用来声明您的其他函数，例如onClickEvent: yourNamedFunction,和addReceiver() yourNamedFunction(); 。 $之类的对象的引用可以在里面，只要在函数调用的时候定义就可以了

【参考方案1】：

您应该能够使用 es2015 速记方法定义让您的 options 对象中的函数访问组件的范围：

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Functions/Method_definitions

var options = 
    data: this.contacts,
    getValue: "name",
    list: 
        match: 
            enabled: true
        ,
        onClickEvent() 
            //You now have access to the component as this
            var name = $("#to").getSelectedItemData().name;
            $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");
            this.receivers.push(name); //You should be able to do this now
        ,
        onKeyEnterEvent() 
            //You now have access to the component as this
            var name = $("#to").getSelectedItemData().name;
            $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");
        
    
;

或者，如果我正确地假设 addReceiver() 方法会做同样的事情，你可以这样做：

var options = 
    data: this.contacts,
    getValue: "name",
    list: 
        match: 
            enabled: true
        ,
        onClickEvent: this.addReceiver,
        onKeyEnterEvent: this.addReceiver,
    
;

希望这会有所帮助！

【参考方案2】：

this里面options对象的方法将指向对象本身而不是vue实例。这就是原因

 this.receivers.push(name); //CANT DO THAT ALSO!!!

没用

而是在 options 对象之外定义一个 const vm = this 指向正确的 vue 实例并使用闭包

methods: 
        fetchMessages() 
            axios.get('api/messages').then(response => 
                this.contacts = response.data.contacts;

                const vm = this;

                var options = 
                    data: this.contacts,
                    getValue: "name",
                    list: 
                        match: 
                            enabled: true
                        ,
                        onClickEvent: function() 
                            vm.addReceiver();
                        ,
                        onKeyEnterEvent: function() 
                            vm.addReceiver();
                        
                     
                ;

                $("#to").easyAutocomplete(options);


            );
        ,
        addReceiver()
            var name = $("#to").val();
            this.receivers.push(name);
        
    

【讨论】：

@GrzegorzG。编辑我的答案以重用addReceiver() 看看