【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只能输出一个，如下动图所示：