vue項(xiàng)目中在外部js文件中直接調(diào)用vue實(shí)例的方法比如說this
一般我們都是在main.js中引入vue，然后在vue文件中直接使用this（this指向的是vue實(shí)例），但是在實(shí)際開發(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' //自己寫的一個(gè)js文件。然后可以通過util來引用這個(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í)例的方法比如說this,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue3+koa實(shí)現(xiàn)文件上傳功能的全過程記錄
開發(fā)項(xiàng)目的時(shí)候,用到文件上傳的功能很常見,包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關(guān)于vue3+koa實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下2023-01-01
從零開始Vue3數(shù)據(jù)交互之promise用法詳解
這篇文章主要介紹了Axios的基本使用,包括異步編程的基礎(chǔ)知識(shí),如Promise的介紹、特點(diǎn)和基本用法,以及如何使用then、catch和async/await來處理異步操作,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
vue-cli腳手架config目錄下index.js配置文件的方法
下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了vue項(xiàng)目打包發(fā)布上線的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue項(xiàng)目中公用footer組件底部位置的適配問題
footer為公用組件，其他頁(yè)面都需要引入。接下來通過本文給大家分享vue項(xiàng)目中公用footer組件底部位置的適配問題,需要的朋友可以參考下2018-05-05
Vue實(shí)現(xiàn)網(wǎng)頁(yè)首屏加載動(dòng)畫及頁(yè)面內(nèi)請(qǐng)求數(shù)據(jù)加載loading效果
Loading加載動(dòng)畫組件看起來很簡(jiǎn)單不重要,實(shí)際上它是保證用戶留存的關(guān)鍵一環(huán),下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)網(wǎng)頁(yè)首屏加載動(dòng)畫及頁(yè)面內(nèi)請(qǐng)求數(shù)據(jù)加載loading效果的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了VUE 組件轉(zhuǎn)換為微信小程序組件的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
利用FetchEventSource在大模型流式輸出的應(yīng)用方式
這篇文章主要介紹了利用FetchEventSource在大模型流式輸出的應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vite項(xiàng)目如何集成eslint和prettier
這篇文章主要介紹了vite項(xiàng)目如何集成eslint和prettier問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue.js動(dòng)畫中的js鉤子函數(shù)的實(shí)現(xiàn)
這篇文章主要介紹了vue.js動(dòng)畫中的js鉤子函數(shù)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07