vue项目中在外部js文件中直接调用vue实例的方法比如说this


Posted in Javascript onApril 28, 2019

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦。在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入。

步骤一:main.js导出vue实例

var vue = new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})
export default vue

步骤二、在需要使用的js中引入

import context from '../main.js'
context.$router.push('/login')

补充:vue项目中引入外部css以及js文件的方法

引入css

<template></template>
 <style scoped>
 @import "../assets/common/common.css";
</style>

引入js

1,在需要的页面引入,

import '../../../static/js/jquery-1.9.1.min.js'  //jq插件
import util from '../../common/js/util'     //自己写的一个js文件。然后可以通过util来引用这个文件里面的函数。比如util.getTime()

2,在main.js全局引入,每个页面都可以直接使用不必在调用了

//引入echart
 import echarts from 'echarts'
 Vue.prototype.$echarts = echarts

然后需要的页面不用引入直接使用 let myChartPie = this.$echarts.init(document.getElementById('chartPie'));

总结

以上所述是小编给大家介绍的vue项目中在外部js文件中直接调用vue实例的方法比如说this,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
javascript基本语法
May 31 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
js 图片懒加载的实现
Oct 21 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 #Javascript
详解vue更改头像功能实现
Apr 28 #Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 #Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 #Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 #Javascript
详解微信小程序调用支付接口支付
Apr 28 #Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 #Javascript
You might like
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php 修改上传文件大小限制实例详解
2016/10/23 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
php use和include区别总结
2019/10/13 PHP
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
Vue实现日历小插件
2019/06/26 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
基于pip install django失败时的解决方法
2018/06/12 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
警察思想汇报
2014/01/04 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
主题班会演讲稿
2014/05/22 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
会议通知范文
2015/04/15 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
入党团支部推荐意见
2015/06/02 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers