vue中 export default 与 export 写法的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中 export default 与 export 写法的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、export default 用法

1.1、定义函数

d.js

const a = [{name:''张三"}]
const b = [{name:''李四"}]
export default {
    a,
    b  
}

1.2、使用

a.js

import dic from './d'   // 在一个文件中，只能导入一次

export function test() {
  console.log('dic',dic,dic.a)
}

export default 命令用于指定模块的默认输出。一个模块只能有一个默认输出，因此 export default 命令 只能使用（导入）一次

2、export 用法

2.1、定义函数

d.js

export const a = [{name:''张三"}]
export const b = [{name:''李四"}]

2.1、使用

1）使用方法1：一次性导入所有函数

a.js

import * as dic from './d'   // * 表示一次导入所有的函数。as 表示起别名

export function test() {
  console.log('dic',dic,dic.a)
}

这种写法 test() 输出的 dic对象与 export default 是一样的，但是区别是这里的dic是module对象，export default 的 dic 是正常对象。

2）使用方法2：按需导入函数，使用大括号

export 方式定义的函数，使用时，只想导入需要的函数时，要使用 大括号 。可以分多次导入。

a.js

import {a} from './d'  // 使用大括号，只导入需要的函数，可以分多次导入
import {b} from './d' 

export function test() {
    console.log('dic-a',a)
}
export function test2() {
    console.log('dic-b',b)
}

3、总结

定义时：
export default 定义函数时，只能出现一次；export function 可以出现多次，不限次数。
使用时：
导入 export default 定义函数时，只能导入一次。
导入 export function 定义函数时，可以一次，也可以多次，不限次数。
大括号：
第一组 export default ，对应的 import 语句不需要使用大括号；
第二组 export function ，对应的 import 语句 需要使用大括号。
导入次数
export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此 export default 命令只能使用一次，因此 import 命令后面才不用加大括号。
export function 即可以一次性全部导入，也可以按需导入。如果是按需导入时要使用大括号。文章来源地址https://www.toymoban.com/news/detail-856988.html