• 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实例

     
  • 相关阅读:
    Java 添加条码、二维码到Word文档
    我的博客园博客开通了
    新浪博客发博文老是提示系统繁忙、请稍后再试解决方法
    阿里云服务器https改造全过程
    网站从HTTP移动到HTTPS
    Apache ab性能测试结果分析
    Memcached与Redis的区别和选择
    binlog2sql使用介绍
    Mysql查看连接数(连接总数、活跃数、最大并发数)
    测试流程规范--测试准入、准出、停止标准、bug优先级定义
  • 原文地址:https://www.cnblogs.com/fqh123/p/10361569.html
Copyright © 2020-2023  润新知