在普通js文件里引入vue实例的方法
首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的。

在main.js中use使用了这个插件。

至此vue原型是就被我挂上 $loadding方法了。
然后我想在封装的axios的http.js文件里使用这个插件。所以我得想办法把vue实例引进来。
经过测试可以如下这样。(好吧上面,都是废话)

图中代码:
import Vue from 'vue'; //引入vue
//必须实例化 Vue
let vm = new Vue();
/*这里有个点需要注意,直接在这个js文件里,直接使用 console.log(vm),可以看到我在挂到Vue.prototype上的$loading自定义方法,
* 但是在console.log(vm.$loading); 时会显示 undefined , 输出vue上的自身方法时,不会显示undefined。
* 我在网上找到的解释如下:
* 注意不要在普通js中导入后,直接console.log(),这个时候组件还没创建肯定是undefined。 (应该是这个http.js在main.js之前加载了)
* 不过我经过经过测试,通过setTimeout()延时输出时,就不会有 就不会是undefined了。
* 这所说明这个方法不是这个js文件一加载就执行的话,这个这样通过 import 和 new的方式还是可以用的。
* 正好也可以满足了我的需求。嘻嘻!!
* */
setTimeout(()=>{
console.log(vm.$loading); //不是undefined了
},4000);
如果不是属性或方法不是挂到 vue.prototype 原型上时,如上获取,就会出现文件。解决方法可参考:https://www.cnblogs.com/taohuaya/p/10765731.html
参考文章:
1. https://segmentfault.com/q/1010000010269801
2. https://segmentfault.com/q/1010000012327314
3. https://segmentfault.com/q/1010000011312340
在普通js文件里引入vue实例的方法的更多相关文章
- 在vue项目中的js文件里使用vue实例
参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...
- 在被vue组件引用的 js 文件里获取组件实例this
思路: 通过调用函数 把 组件实例this 传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...
- vue的js文件中获取vue实例
1.main.js导出vue实例: var vue = new Vue({ el: '#app', router, components: { App }, template: '<App/&g ...
- nuxtjs如何在单独的js文件中引入store和router
nuxtjs里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除.这样就会存在一个问题,我怎么像普通vue spa项目一样直接 impor ...
- BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...
- vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- 在js文件里调用另一个js文件里的函数
这个是我今天解决的一个小问题,我在创建界面的时候,根据不同的界面需求对应创建了不同的js文件来搭建界面,搭建完毕之后再将各个生成页面的函数汇总到主界面上,通过visibility属性切换显示,这时候出 ...
- 常用代码之五:RequireJS, 一个Define需要且只能有一个返回值/对象,一个JS文件里只能放一个Define.
RequireJS 介绍说一个JS文件里只能放一个Define,这个众所周知,不提. 关于Define,它需要有一个返回值/对象,且只能有一个返回值/对象,这一点却是好多帖子没有提到的,但又非常重要的 ...
- [转]html页面调用js文件里的函数报错onclick is not defined处理方法
原文地址:http://blog.csdn.net/ywl570717586/article/details/53130863 今天处理html标签里的onclick功能的时候总是报错:Uncaugh ...
随机推荐
- 关于token登录逻辑分析
前言: token登录上一家公司也写过,迷迷糊糊的, 现在做一个APP,需求为每次调用接口都会传token,登录注册等特殊的除外, 逻辑整理一下还是比较简单的 主要的问题还是,如何在框架中找到较好的插 ...
- 解决多线程安全问题-无非两个方法synchronized和lock 具体原理(百度-美团)
还有其他的锁,如果想要了解,参考:JAVA锁机制-可重入锁,可中断锁,公平锁,读写锁,自旋锁, 用synchronized实现ReentrantLock 美团面试题参考:使用synchronized ...
- Eclipse 设置背景色
window -> preferences -> General -> Editors -> Test Editors -> Background color 勾掉Sy ...
- js 图片瀑布流效果实现
/** * Created by wwtliu on 14/9/5. */$(document).ready(function(){ $(window).on("load",fun ...
- linux文件目录权限和系统基础优化命令(yum源配置)
一.用户 1.介绍 我们都知道linux中有root用户和普通用户,但是同样是普通用户,为什么有些用户的权限却不一样呢?其实这就类似于我们的QQ群,root用户就是QQ群主,他拥有最高的权利,想干什么 ...
- jQUERY中的属性获取
jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...}); //为Se ...
- LoadRunner【第二篇】原理及使用流程
loadrunner工作原理 性能测试只关注底层数据,不关注业务,不关注客户端动作.所以,脚本运行正确不一定业务就正确(业务是否正确,如果是查询,我们可以通过检查点来判断:如果是增删改操作,可以看通过 ...
- 2018ICPC青岛现场赛 重现训练
先贴代码,以及简要题解. 和一个队友下午双排打了一下,队友光速签到,我签的J被嫌弃写得慢以及演员...然后我秒出了E了思路然而难以置信这么简单的思路当时才过了十几个,于是发现D.F不是太好做.最后交了 ...
- 记录一次有意思的XSS过滤绕过
我的朋友赵一天今晚给我发了一个站,跟我说他xss绕不过去,让我试试.我正好无事,就帮她看看咯. 通过赵一天发我的站点,说实话,我自己学到了很多东西,感谢大佬的教诲.今天分享出来: 站点:xxx.com ...
- Gym - 101350F Monkeying Around(线段树+树状数组)
When the monkey professor leaves his class for a short time, all the monkeys go bananas. N monkeys a ...