VUE中的export default和export使用方法解析

下面就为您详细讲解Vue中的export default和export使用方法解析。

1. export和export default的区别

在Vue中，我们常常使用export和export default来导出模块。它们的作用是相同的，都是用来将模块暴露给其他模块使用的。

不同的是，使用export导出的模块需要通过import {模块名} from '模块地址'的方式引入，而使用export default导出的模块可以直接通过import 模块名 from '模块地址'的方式引入。

下面是一些具体的例子，来感受一下两者的区别。

1.1. export语法

//模块定义
export const a = 123;
export function test() {
    console.log("这是test函数");
}
export class MyClass {
    constructor() {
        console.log("这是MyClass类的构造函数");
    }
}

//模块引用
import { a, test, MyClass } from './test';             //引用方式1
import * as testModule from './test';                  //引用方式2
console.log(a);                                       //输出：123
test();                                               //输出：这是test函数
const myClass = new MyClass();                        //输出：这是MyClass类的构造函数

1.2. export default语法

//模块定义
const b = 123;
export default b;

//模块引用
import b from './test';                                //引用方式1
import test from './test';                             //引用方式2
import * as testModule from './test';                  //引用方式3
console.log(b);                                       //输出：123
console.log(test);                                    //输出：123

2. 使用export和export default的注意事项

2.1. export语法的注意事项

• export语句必须处于模块的顶部。
• export语句必须有具体的标识符（如常量、函数、类）或者是变量。
• export语句可以使用as关键字来重命名导出的模块。

示例如下：

//导出的模块
const a = 123;
export { a as myA };

//引用导出的模块
import { myA } from './test';
console.log(myA);                                     //输出：123

2.2. export default语法的注意事项

• 在一个js文件中，只能使用一次export default语法。
• export default语句既可以导出表达式，也可以是类、函数等。
• export default语句不支持使用as关键字来重命名导出的模块。

示例如下：

//导出的模块
export default {
    name: "小明",
    age: 18
}

//引用导出的模块
import person from './test';
console.log(person);                                   //输出：{ name: "小明", age: 18 }

3. 结语

到此为止，我们对Vue中export和export default的使用方法有了一定的了解。在开发当中，选择export还是export default，要根据实际情况来选择。在大部分情况下，我们建议使用export default语法来导出模块。