一般我们都是在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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
本文向大家介绍vue项目中跳转到外部链接的实例讲解,包括了vue项目中跳转到外部链接的实例讲解的使用技巧和注意事项,需要的朋友参考一下 当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题
本文向大家介绍在vue项目中引入vue-beauty操作方法,包括了在vue项目中引入vue-beauty操作方法的使用技巧和注意事项,需要的朋友参考一下 vue-beauty有丰富的vue组件库,使用vue-beauty方便项目的开发,下面介绍在vue项目中引入vue-beauty。 1、vue项目初始化 npm install --global vue-cl:全局安装vue脚手架vue ini
有大佬使用过clickhouse js吗,救命啊 想问问clickhouse js在vue项目里怎么连接数据库进行增删改查呢 没有一点头绪,求指教...
我有一个javascript函数在一个单独的js文件,该文件在ASP. net应用程序的中,它调用引导烤面包机。 烤面包机留言。js。 我想从我的vue实例调用。我创建vue实例与直接脚本包含。 我不想在Vue实例之外向函数添加任何Vue依赖项。那么,调用Vue实例之外的外部js文件中的函数的正确方法是什么呢? 当我尝试使用以下方式导入时: 使用时: 我得到的错误是: 我尝试使用以下方式导入: 这
本文向大家介绍在 React、Vue项目中使用SVG的方法,包括了在 React、Vue项目中使用SVG的方法的使用技巧和注意事项,需要的朋友参考一下 在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标、用户的默认头像、移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示。 而实际上,这些简单的小图标完全没
例如我 import {test} from './test.js' 我如何直接在 <el-dialog :before-close= "test(this)"> 中使用 还是必须创建一个中转函数才行 请高手赐教,谢谢!