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 单位 ...
随机推荐
- 安装redis出现cc adlist.o /bin/sh:1:cc:not found的解决方法
安装redis时 提示执行make命令时提示 CC adlist.o /bin/sh: cc: 未找到命令 问题原因:这是由于系统没有安装gcc环境,因此在进行编译时才会出现上面提示,当安装好gc ...
- Hadoop2.7.3+HBase1.2.5+ZooKeeper3.4.6搭建分布式集群环境
Hadoop2.7.3+HBase1.2.5+ZooKeeper3.4.6搭建分布式集群环境 一.环境说明 个人理解:zookeeper可以独立搭建集群,hbase本身不能独立搭建集群需要和hadoo ...
- 倍福TwinCAT3上位机与PLC通信测试(ADS通信) 包含C#和C++代码
倍福TwinCAT3上位机与PLC通信测试(ADS通信) 包含C#和C++代码 本次测试需要环境: VS2013,TwinCAT3(本人版本TC31-Full-Setup.3.1.4018.16) 代 ...
- Excel如何实现两个工作表数据的对比
https://jingyan.baidu.com/article/63f236281f17650208ab3d97.html Sub 数据对比() Dim i As Integer Dim j As ...
- 【BZOJ5210】最大连通子块和 树剖线段树+动态DP
[BZOJ5210]最大连通子块和 Description 给出一棵n个点.以1为根的有根树,点有点权.要求支持如下两种操作: M x y:将点x的点权改为y: Q x:求以x为根的子树的最大连通子块 ...
- spring的一些其他功能
今天看书,知识点多一点了,涉及到了较多的知识,如scheduling计划任务,spring对多线程的支持,以及配置开发.测试和生产环境的profile.这些都是集成在spring中的,需要用时可以参考 ...
- 可访问性(Accessibility) => 无障碍功能
了解无障碍功能及其范围和影响可令您成为更出色的网络开发者 复杂的一笔 https://developers.google.cn/web/fundamentals/accessibility/ ARIA ...
- 如何打jar包 学习笔记
jar包是由.class文件压缩而成.要查看jar包中的内容,使用压缩工具 解压缩即可.也可以做修改,并重新打成jar包.总结一下最近学到的一些打jar包的方法: 一.DOS下使用jar命令 打jar ...
- PAT甲级1052 Linked List Sorting
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805425780670464 题意: 给定一些内存中的节点的地址,值 ...
- Linq多表联合查询,在View中绑定数据
Ⅰ→通过ViewData传递数据,不过需要新建一个类(用来存) NewClass(里面有表1的字段和表2的字段) public class JoinTab1_2 { public int ID { g ...