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 单位 ...
随机推荐
- Go Revel - i18n(国际化)
##Messages `Messages`信息是对内容提供翻译的外部文本片段.revel提供了组织每一种语言文本片段的message文件.自动区域查找.基于cookie覆盖的消息嵌套和参数. 术语表: ...
- (原)Android在子线程用handler发送的消息,主线程是怎么loop到的?
来自知乎:https://www.zhihu.com/question/48130951?sort=created 大家都知道Android的Looper是ThreadLocal方式实现,每个线程 ...
- snopy 数据库简介
snoRNA ,small nucleolar RNA, 核仁小分子RNA, 是一类在细胞核内的small non-coding RNA, 长度在60-300nt, 其主要功能是调控其他小RNA分子( ...
- postman中 form-data、x-www-form-urlencoded、raw、binary的区别--转
原文地址:http://blog.csdn.net/ye1992/article/details/49998511 1.form-data: 就是http请求中的multipart/form-dat ...
- printf打印输出null问题的跟踪
最近在工作中,遇到一处 printf输出有null的情况,在此记录一下,问题分析的过程. 测试代码很简单,本机为64位操作系统: #include <stdio.h> #include & ...
- C# winform写入和读取TXT文件
C# winform写入和读取TXT文件 string str; str=this.textBox1.Text; StreamWriter sw = new ...
- Go的微服务库kite
Kite Kite是用Go开发的一套RPC库,很适合作为分布式微服务的开发框架. Kite 的传输层使用 SockJS 提供的WebSocket服务, 浏览器Javascript也可以连接到Kite上 ...
- nodejs即时通讯模块+SocketIO4Net的使用小结
实现思路:客户端js连接了nodejs服务,通过.net连接nodejs服务,通过.net发送消息到nodejs,然后通过nodejs将消息推送给(用户)客户端 1.先下载nodejs安装,至于怎么安 ...
- SpringBoot自定义错误页面,SpringBoot 404、500错误提示页面
SpringBoot自定义错误页面,SpringBoot 404.500错误提示页面 SpringBoot 4xx.html.5xx.html错误提示页面 ====================== ...
- C++/MFC-线程优先级
转载: https://blog.csdn.net/qwdpoiguw/article/details/72830426 一.线程优先级(Thread priority ) 简单的说就是(线程)的优先 ...