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实例
vue项目中 如何让外部引入的js模块 的this值 指向vue实例的更多相关文章
- Vue项目中如何引用外部js
		
第一种方法:(感觉这个有问题) 1.把需要的js放到static文件夹下 2.在Index.html页面引入 3.在webpack.base.conf.js添加下面代码 externals: { 'W ...
 - vue项目中主要文件的加载顺序(index.html、App.vue、main.js)
		
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
 - Vue项目中导入excel文件读取成js数组
		
1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...
 - vue 项目中实用的小技巧
		
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
 - 转:如何在Vue项目中使用vw实现移动端适配
		
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
 - 在Vue项目中使用vw实现移动端适配
		
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
 - Vue项目中如何使用Element-UI以及如何使用sass
		
Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...
 - 如何在Vue项目中使用vw实现移动端适配(转)
		
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
 - 如何在Vue项目中使用vw实现移动端适配
		
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...
 
随机推荐
- 【iCore1S 双核心板_FPGA】例程十二:基于单口RAM的ARM+FPGA数据存取实验
			
实验现象: 核心代码: module single_port_ram( input CLK_12M, input WR, input RD, input CS0, inout [:]DB, input ...
 - 配置Django
			
第一步,安装Python,在这里下载,如果你安装在C:\Python27, 把C:\Python27;C:\Python27\Scripts;C:\Python27\Lib 加到你的Path 第二步: ...
 - 微信mac版的bug 直接显示了消息原始数据
			
<msg> <voicemsg endflag="1" cancelflag="0" forwardflag="0" vo ...
 - Java知多少(11)数据类型转换
			
数据类型的转换,分为自动转换和强制转换.自动转换是程序在执行过程中“悄然”进行的转换,不需要用户提前声明,一般是从位数低的类型向位数高的类型转换:强制类型转换则必须在代码中声明,转换顺序不受限制. 自 ...
 - c++类成员函数后边加const是为什么?
			
时间是让人猝不及防的东西,晴是有风阴时有雨,争不过朝夕,又念着往昔,偷走了青丝却留住一个你 #include <iostream> #include <string> usin ...
 - 第三百九十七节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,主题本地化设置
			
第三百九十七节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,主题本地化设置 主题设置是在xadmin\plugins\themes.py这个文件 默认xadmin是通过下面这 ...
 - java-信息安全(十三)-数字签名,代码签名【Java证书体系实现】
			
概述 信息安全基本概念 前置 java-信息安全(十二)-数字签名[Java证书体系实现] 过程 通过工具JarSigner可以完成代码签名. 这里我们对tools.jar做代码签名,命令如下: 进 ...
 - #Java学习之路——基础阶段二(第十篇)
			
我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...
 - JVM的内存划分以及常用参数
			
JVM的主要划分为: 堆内存,虚拟机栈,方法区,程序计数器,本地方法栈 堆内存: 这部分区域是各个线程共享的,java的大部分对象都是储存在堆中. 1.堆在分配对象内存区域的时候可以分为两种,第一种叫 ...
 - case when then end
			
当 a>b获取a,否则获取b,当a>c获取a,否则获取c,b大于c获取b否则获取c SELECT id,(CASE WHEN a>b THEN a WHEN a>c THE ...