export和export default和import的说明

目录

1.说明

2.export

3.import

4.export default

5.总结

---

1.说明

ES6中，export与export default均可用于导出常量、函数、文件、模块等。

import用于导入其他被导出的常量、函数、文件、模块等。

2.export

一个独立的文件，该文件内部的变量，方法等，外部无法获取。如果想读取其他vue文件中的变量及方法，就需要在其他vue文件中使用export导出变量及方法。比如，在vue1文件中定义一下变量及方法进行导出。

const id = '1123';
const setId = (param) =>{
    id = param;
}

export {id,setId}

通常来说，export导出的变量和方法就是原来的名字，可以通过as关键字来进行重命名。

3.import

在一个文件中使用export进行导出之后，可以在其他文件使用import进行导入。在script标签的头部，一般用来导入其他文件中的变量及方法。导入之后就可以在文件中进行使用。

<script>

import {id, setId} from './vue1';


</script>

注意：导入时必须添加花括号，否则控制台会直接报错。

导入之后也可以使用as进行重命名

from后面的路径可以使用相对路径，也可以使用绝对路径，可以将src定义为一个目录@，其他文件以此来进行定位。在vue3的vite.config.js中按照如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

4.export default

export defalult用于指定模块的默认输出，一个模块只能有一个默认输出，所以在一个文件中只能使用一次。导入是不需要添加花括号，因为只能唯一对应export default。

本质上，export default输出一个叫default的变量，系统允许你导入时为它任意取名字。

5.总结

①export与export default均可用于导出常量、函数、文件、模块等

②在一个文件或模块中，export、import可以有多个，export default仅有一个

③通过export方式导出，在导入时要加{ }，导入时要和之前导出时的名字一致；export default则不需要加{}，并且导入时可以任意起名字。

④export default与普通的export不要同时使用。