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