Vue项目中在外部JS文件调用Vue实例的方法

外部JS调用Vue实例的方法

通常在main.js中引入Vue后，可以在Vue单文件组件中直接使用this，此时this指向当前Vue实例。但在实际开发中，若需在外部独立的JS文件里使用this，该this默认指向window对象，而非Vue实例。虽然可以通过在外部JS中再次import Vue from 'vue'来重新获取实例，但这种方式较为繁琐。一种更简洁的做法是在main.js中导出Vue实例，随后在需要使用的JS文件中引入该实例。

第一步：在main.js中导出Vue实例。

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

第二步：在需要调用Vue实例的JS文件中引入该实例。

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

外部CSS与JS的全局引入

补充说明：在Vue项目中引入外部CSS和JS文件的方法。

引入CSS文件。

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

引入JS文件。

方法一：在具体的Vue页面组件中引入所需资源。

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

方法二：在main.js中进行全局引入，这样所有页面均可直接使用，无需重复调用。

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

完成全局引入后，在需要的页面中无需再次引入，可直接使用 let myChartPie = this.$echarts.init(document.getElementById('chartPie'));。

总结。

以上介绍了Vue项目中在外部JS文件直接调用Vue实例（如this）的方法，以及外部资源的引入方式，希望能帮助读者解决相关问题。如有任何疑问，欢迎留言交流，小编会及时回复。感谢大家对本站的支持！若觉得本文有帮助，欢迎转载，请注明出处，谢谢！