【VUE】- import ...與import{ }的區別

前端項目引入文件的過程中我們會發現一個問題，有的引入文件中是直接引入，而有的地方是加了花括號的，那麼這兩者有什麼區別，都是什麼時候使用呢？

一、文件引入方式

首先我們看一下這兩者不同引入文件的方式：

1. 說到這兩種方式我們需要了解，vue中文件引入的幾種方式，第一種引入方式：組件引入（自定義組件或第三方組件），如下：

//引入組件
import momoTemplate from "../../components/momoTemplate.vue";

//註冊組件
export default {
  components: { momoTemplate }
}

2. 引入變量-引入單個、多個

• 變量定義與輸出

//定義
const settingSwitchData = [{
    'arrowIcon': require('../../public/settings/顯示.png'),
    'allColumnsTitle': '顯示單詞',
    'allColunmnsSwitch': '0',
    'isTure': 'false'
}]

//輸出-傳出參數（對外輸出本模塊（一個文件可以理解爲一個模塊）變量的接口）
export {
   settingSwitchData
}

• 變量引入

//引入單個
import { settingData } from "../../Entity/settingDataEntity";

//引入多個
import { settingData, settingSwitchData } from "../../Entity/settingDataEntity";

• 方法書寫：

export function selectLikeCount(brainStormId) {
  return request({
    url: `/brainstorm/answer/selectLikeCount?brainStormId=${brainStormId}`,
    method: 'get'
  })
}

• 引入方法

//引入API中的定義的方法
import { selectLikeCount } from '@/api/answerlist.js'

哪個頁面需要就引入到哪個文件，這樣頁面方法就可以直接使用了

二、import…與import{}

通過上述幾種常用引入方式我們可以瞭解到，這兩種書寫方式的區別，可以通俗的理解爲整體與局部；
將文件作爲一個整體引入則是使用：import xxx from ‘路徑’
引入文件的一部分或某些部分的時候會使用帶{}的方式：import { xxx } from ‘路徑’

三、export與export default

另一個影響引入方式的還有我們在輸出時的輸出模式，export與export default，根據字面意思我們可以知道這兩者的意思分別是：export-輸出，export default輸出默認因此在一個文件或模塊中
export輸出方式可以輸出一個或多個，
而export default只能輸出一個，如下動圖所示：