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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 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
PHP数据库开发知多少
2006/10/09 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
python基本语法练习实例
2017/09/19 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python pygame实现2048游戏
2018/11/20 Python
Python控制Firefox方法总结
2019/06/03 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
用python实现一个简单的验证码
2020/12/09 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
初中生个人学习的自我评价
2013/12/04 职场文书
yy司仪主持词
2014/03/22 职场文书
家长寄语大全
2014/04/02 职场文书
文明倡议书范文
2014/04/15 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
高中家长意见怎么写
2015/06/03 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers