目录
1.正常导出导入
导出模块(fn_data.js):
const name = '张三'
const age = 18
const say = function () {
console.log('nice to meet you')
}
export { name, age, say }
导入(fn_handle.js):
import { name, age, say } from './fn_data.js'
console.log(name)
console.log(age)
console.log(say)
结果如下:
export { }, 与变量名绑定,命名导出。
import { } from 'module', 导入module的命名导出 ,module 为如上的./fn_data.js
这种情况下 import { } 内部的变量名称,要与 export { } 完全匹配。
2.默认导出
导出模块(fn_data.js):
const name = '张三'
const age = 18
const say = function () {
console.log('nice to meet you')
}
export default {
name,
age,
say
}
导入(fn_handle.js):
import fn_data from './fn_data.js'
console.log(fn_data) //{name: '张三', age: 18, say: ƒ}
export default any 导入 module 的默认导出。any 可以是函数,属性方法,或者对象。
对于引入默认导出的模块,import any from 'module', any 可以是自定义名称。
3.混合导入/导出
导出模块(fn_data.js):
export const name = '张三'
export const age = 18
export const say = function () {
console.log('nice to meet you')
}
1.合并导入(fn_handle.js):
import say, * as mes from './fn_data.js'
console.log(say) // ƒ say() {console.log('nice to meet you')}
console.log(mes)
打印结果如下:
导出的属性被合并到 mes 属性上,export 被导入到对应的属性上,export default 导出内容被绑定到 default 属性上。say 也可以作为被 export default 导出属性
2.重命名导入(fn_handle.js):
import say,{ name as user_name, age as user_age } from './fn_data.js'
console.log(user_name) //张三
console.log(say) //ƒ say() {console.log('nice to meet you')}
console.log(user_age) //18
从 module 模块中引入 name ,并重命名为 user_name,从 module 模块中引入 age ,并重命名为 user_age。然后在当前模块下,使用被重命名的名字。