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第一课
Feb 27 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
javascript 实现 原路返回
Jan 21 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 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运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
环境工程求职简历的自我评价范文
2013/10/24 职场文书
初中政治教学反思
2014/01/17 职场文书
工艺员岗位职责
2014/02/11 职场文书
2014年图书室工作总结
2014/12/09 职场文书
开平碉楼导游词
2015/02/06 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python