ES6中export default 命令的详解(引用)

我们知道在学习VUE的时候export default{}是不可缺少的,但是它的含义我们必须理解。 
export default{}这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export ,在文件 B 中引入 import ,把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。

 

//export-default.js 这是一个模块文件export-default.js,

它的默认输出是一个函数

export default function () { console.log('foo'); }

 

//import-default.js import customName from './export-default'; customName(); //'foo' //这是的import命令,可以用任意名称指向export-default.js输出的方法,这时就不需要知道原模块输出的函数名。 需要注意的是,这时import命令后面,不使用大括号。

 

2、export default命令用在非匿名函数前

// export-default.js export default function foo() { console.log('foo'); } // 或者写成 function foo() { console.log('foo'); } export default foo; //上面代码中,foo函数的函数名foo,在模块外部是无效的。加载的时候,视同匿名函数加载。

 

ES6中export default 命令的详解(引用)

ES6中export default 命令的详解(引用)

 

ES6中export default 命令的详解(引用)ES6中export default 命令的详解(引用)

ES6中export default 命令的详解(引用)