https://blog.csdn.net/weixin_44670973/article/details/90552796
Vue項目中如何引入外部js文件,並使用其中定義的函數
Vue項目中如何引入外部js文件,並使用其中定義的函數
一些常用的功能函數,我們希望將其封裝起來放入一個外部JS文件中,好方便我們在需要的時候使用。vue可以使用import指令引入外部文件,但是作爲新手,在使用過程中難免會導致很多錯誤,這裏就將我遇到的一些問題做一下總結
編寫外部js文件
這個比較簡單,就正常將我們需要使用的功能函數安裝js格式寫入js文件即可
需要注意的是,當我們希望在vue項目中使用其中的函數時,我們需要在js文件中將我們的功能函數用export拋出,下面是一個簡單的案列:
function sayMsg(msg){
console.log(msg);
}
export { //關鍵
sayMsg
}
VUE中引入外部js
使用import from引入你寫好的js文件,這個時候需要注意import後面跟的是我們需要使用的函數,必須放在{ }中,不放在{ }內會提示找不到該函數。函數名字必須和你在js文件中定義和export{}拋出的名字一致。
import {sayMsg} from '../../common/sayMsg.js'
1
如何使用該函數
前面我們已將sayMsg函數從js文件中導入vue項目中,這個時候使用它直接調用即可,像下面這樣:(函數前面不需要加this,通常在vue項目中定義的函數在調用時要在前面加上this,但是這裏不需要,加上會報錯)
sayMsg('Hello World!');
1
問題總結
一個就是在js文件中沒有用export{}拋出函數
在引用時沒有使用{}將函數名括起來
在使用的時候在前面加上了this