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 单位 ...
随机推荐
- 【emWin】例程十九:窗口对象——Checkbox
简介: 复选框是选择各种不同选项的最常用小工具之一.用户可选中或取消选中复选框,并且可一次选中任意个框 触摸校准(上电可选择是否进入校准界面) CHECKBOX三状态模式 CHECKBOX设置字体颜色 ...
- android 自定义无限循环播放的viewPager。轮播ViewPager。实现循环播放 广告,主题内容,活动,新闻内容时。
前言 实际项目需要一个 播放广告的控件,可能有多个广告图片.每个一段时间更换该图片.简单来说,就是一个 “循环播放图片”的控件. 间隔时间更换图片 一般来说,图片切换时需要有动画效果 需要支持手势,用 ...
- Halcon的数据类型
两大类: 1.图形参数Iconic (image, region, XLD) 2.与控制参数Control (string, integer, real, handle), 在Halcon算子的参数中 ...
- openssl 非对称加密DSA,RSA区别与使用介绍
在日常系统管理工作中,需要作一些加解密的工作,通过openssl工具包就能完成我们很多需求! 1. openssl RSA 加解密 RSA是基于数论中大素数的乘积难分解理论上的非对称加密法,使用公私钥 ...
- C++ 智能指针五
/* 代码分析: 这是标准库的源码,我们看到在enable_shared_from_this内部保存了一个weak_ptr.shared_from_this函数就是通过这个weak_ptr得到了. 但 ...
- rqalpha探究 2 接入mod
程序的目的是尽可能用mod扩展功能,所以接下来需要接入mod模块
- Error - SqlDateTime overflow. Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM
I find using the following works quite well for SQL min/max dates after many DB related errors: Date ...
- linux log
adb shell logcat GOODIX:v *:s cat /proc/kmsg | grep "<<" ./cbootimg.sh adb shell get ...
- [Cubieboard] 镜像资源汇总
Linaro Server 14.04 (SDCard) 下载:cb2-lubuntu-server-tsd-tfcard-v2.0.img.gz 内核:GNU/Linux 3.4.79 armv7l ...
- c++ union内存
看一个例子: #include <iostream> #include <stdio.h> using namespace std; union A { int a; stru ...