vue項目中在外部js文件中直接調(diào)用vue實例的方法比如說this
更新時間：2019年04月28日 11:22:10 作者：666888
這篇文章主要介紹了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')
補(bǔ)充：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)文章
本文給大家介紹基于 Vue 實現(xiàn)一個酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎(chǔ)知識，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-11-11
這篇文章主要介紹了在vue項目中使用sass的配置方法,需要的朋友可以參考下2018-03-03
在?Vue?框架中,哪些地方容易被攻擊呢？寫代碼的時候要注意什么呢？這篇文章中小編為大家總結(jié)了一些常見的容易受到攻擊的地方,希望對大家有所幫助2024-02-02
這篇文章主要給大家介紹了關(guān)于Vue中進(jìn)行打包與部署的相關(guān)資料, 我們常使用前后端分離項目時,會需要將前端vue打包然后部署,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue項目判斷開發(fā)、測試、正式環(huán)境過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue表單驗證插件的制作過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了uniapp?vue與nvue輪播圖輪播圖組件的實例代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12
el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題
這篇文章主要介紹了el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
由于狀態(tài)零散地分布在許多組件和組件之間的交互中,大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長,為了解決這個問題,Vue 提供 vuex,這篇文章主要給大家介紹了關(guān)于vuex項目中登錄狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue使用$http服務(wù)端收不到參數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04