在普通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 ...
随机推荐
- SpringMVC整合freeMarker实现页面静态化+SpringMVC配置多视图
一.背景 1.什么是FreeMarker FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 FreeMarker被设计用来生成HTML Web页面,特别是基于 ...
- Python中的可视化神器:pyecharts
pyecharts是一款将python与echarts结合的强大的数据可视化工具,本文将为你阐述pyecharts的使用细则 前言 我们都知道python上的一款可视化工具matplotlib,而前些 ...
- java基础3之IO
流 流是一个很形象的概念,当程序需要读取数据的时候,就会开启一个通向数据源的流,这个数据源可以是文件,内存,或是网络连接.类似的,当程序需要写入数据的时候,就会开启一个通向目的地的流. 流的种类 字符 ...
- 2.8 hashlib模块
- Forget Guava: 5 Google Libraries Java Developers Should Know
Forget Guava: 5 Google Libraries Java Developers Should Know Published on 2016 7 13 Somenath PandaFo ...
- python之OpenCv(四)---人脸识别
对特定图像进行识别,最关键的是要有识别对象的特征文件.OpenCV已经内置了人脸识别特征文件,我们只要使用OpenCV的CascadeClassifier类即可进行识别. 语法: https://gi ...
- Python之路(第十七篇)logging模块
一.logging模块 (一).日志相关概念 日志是一种可以追踪某些软件运行时所发生事件的方法.软件开发人员可以向他们的代码中调用日志记录相关的方法来表明发生了某些事情.一个事件可以用一个可包含可选变 ...
- building tool的简单了解
java常用的三种构建工具: Apache Maven ——主要用于构建Java项目的自动化工具. NetBeans IDE 支持 Maven 构建系统,可帮助您管理项目的依赖关系.构建.报告和文档. ...
- python 网络编程之TCP传输&粘包传输
只有TCP有粘包现象,UDP永远不会粘包. 所谓粘包问题主要还是C/S两端数据传输时 因为接收方不知道消息之间的界限,不知道一次性提取多少字节的数据所造成的 根本原因:粘包是由TCP协议本身造成的,T ...
- idea设置JVM运行参数
对JVM运行参数进行修改是JVM性能调优的重要手段,下面介绍在应用程序开发过程中JVM参数设置的几种方式. 方式一 java程序运行时指定 -Dproperty=value 该参数通常用于设置系统级全 ...