vue項(xiàng)目中在外部js文件中直接調(diào)用vue實(shí)例的方法比如說(shuō)this
一般我們都是在main.js中引入vue，然后在vue文件中直接使用this（this指向的是vue實(shí)例），但是在實(shí)際開(kāi)發(fā)中，我們往往會(huì)引入外部的js文件使用this，這個(gè)this就會(huì)指向window，并不是我們期待的vue實(shí)例，那么就需要重新引入vue文件（import Vue from 'vue'）,這樣很麻煩。在目前項(xiàng)目中我使用的方法是mian.js導(dǎo)出vue實(shí)例，然后在需要使用的js中引入。
步驟一：main.js導(dǎo)出vue實(shí)例
var vue = new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
export default vue
步驟二、在需要使用的js中引入
import context from '../main.js'
context.$router.push('/login')
補(bǔ)充：vue項(xiàng)目中引入外部css以及js文件的方法
引入css
<template></template> <style scoped> @import "../assets/common/common.css"; </style>
引入js
1，在需要的頁(yè)面引入，
import '../../../static/js/jquery-1.9.1.min.js' //jq插件 import util from '../../common/js/util' //自己寫(xiě)的一個(gè)js文件。然后可以通過(guò)util來(lái)引用這個(gè)文件里面的函數(shù)。比如util.getTime()
2，在main.js全局引入,每個(gè)頁(yè)面都可以直接使用不必在調(diào)用了
//引入echart import echarts from 'echarts' Vue.prototype.$echarts = echarts
然后需要的頁(yè)面不用引入直接使用 let myChartPie = this.$echarts.init(document.getElementById('chartPie'));
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目中在外部js文件中直接調(diào)用vue實(shí)例的方法比如說(shuō)this,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件
本文給大家介紹基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎(chǔ)知識(shí)，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-11-11
這篇文章主要介紹了在vue項(xiàng)目中使用sass的配置方法,需要的朋友可以參考下2018-03-03
在?Vue?框架中,哪些地方容易被攻擊呢？寫(xiě)代碼的時(shí)候要注意什么呢？這篇文章中小編為大家總結(jié)了一些常見(jiàn)的容易受到攻擊的地方,希望對(duì)大家有所幫助2024-02-02
這篇文章主要給大家介紹了關(guān)于Vue中進(jìn)行打包與部署的相關(guān)資料, 我們常使用前后端分離項(xiàng)目時(shí),會(huì)需要將前端vue打包然后部署,需要的朋友可以參考下2023-09-09
Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境過(guò)程
這篇文章主要介紹了Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue表單驗(yàn)證插件的制作過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了uniapp?vue與nvue輪播圖輪播圖組件的實(shí)例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問(wèn)題
這篇文章主要介紹了el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vuex項(xiàng)目中登錄狀態(tài)管理的實(shí)踐過(guò)程
由于狀態(tài)零散地分布在許多組件和組件之間的交互中,大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長(zhǎng),為了解決這個(gè)問(wèn)題,Vue 提供 vuex,這篇文章主要給大家介紹了關(guān)于vuex項(xiàng)目中登錄狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue使用$http服務(wù)端收不到參數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04