Vue項目中如何引入外部js文件,並使用其中定義的函數

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
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章