vue模块化机制 |
![](https://i-blog.csdnimg.cn/blog_migrate/f403ab38bbc01ac6c5ea23bd0fcd5fb7.png)
export 和 export default |
一个模块就是一个文件,一个模块内部的变量,文件外部无法获取,如果需要文件外部获取到内部的变量,就需要将文件内的变量进行输出,也就是 export,export可以用来输出多个模块,而且是可以命名的。
//demo1.js
const str = "Hello World!";
function f(a) {
return a + 1;
}
export {
str, f
}
//demo2.js
//引入 demo1.js 文件中的变量与方法
import { str, f } from 'demo1';
如果想为输入的变量重命名,需要使用 as 关键字对输入的变量重命名。
//demo2.js
import { str as str1, f as fun } from 'demo1';
export default 也是用来导出模块,可以在例如 vue 这种单组件文件的项目中使用,通常需要导出一个对象,以便在需要的地方 import
//demo1.js
export default {
data() {
return {
str: "",
}
},
methods: {
printStr() {
console.log(this.str);
}
}
}
//demo2.js
import demo1 from 'demo1';
export 与 export default 的区别是:
- export 可以导出多个有名字的模块,import 的名称必须与export 的模块名称相同 ; 而 export default 只可以导出一个默认的模块,是匿名的。
- import export 模块的时候,需要使用 { }, 而 import export default 模块的时候,直接 import 即可。
- export default 命令输出模块时,一个模块只能有一个输出,因此 export default 只能使用一次,所以 import 时不需加 { },因此只可能唯一import 默认输出模块。