vue项目中 如何让外部引入的js模块 的this值 指向vue实例


当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法,

goToUrl(name,query){
        if(query){
            if(query.addressCode){
                vueObject.$router.push({name:name,query:query});
            }else{
                query.addressCode = this.getParam('addressCode');
                this.$router.push({name:name,query:query});
            }
        }else{
            var query = {};
            query.addressCode = this.getParam('addressCode');
            this.$router.push({name:name,query:query});
        }
    }

上面使用router,query传参的方式实现页面跳转

然后我在vue页面中调用,此方法如:

query.addressCode = tool.getAddressCode();
query.groupId = id;
tool.goToUrl('productDetails',query);

之后报错就来了,提示:push是undefined

然后console了一下goToUrl()方法里面的this,指向的是tool.js整个模块对象!

知道问题所在后,剩下的就是解决了,如何让goToUrl()方法中的this指向vue实例呢?

我第一个想到的就是,在调用tools.js的页面  将vue实例传给 该方法,我们只需要在方法内多加一个参数,将vue实例传过来就行了,看后续代码:

goToUrl(vueObject,name,query){
        if(query){
            if(query.addressCode){
                vueObject.$router.push({name:name,query:query});
            }else{
                query.addressCode = this.getParam('addressCode');
                vueObject.$router.push({name:name,query:query});
            }
        }else{
            var query = {};
            query.addressCode = this.getParam('addressCode');
            vueObject.$router.push({name:name,query:query});
        }
    }
vueObject参数就是vue实例
在页面中使用时:
            var self = this;
            var query = {};
            query.addressCode = tool.getAddressCode();
            query.groupId = id;
            tool.goToUrl(self,'productDetails',query);    

self就是vue实例

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM