导入import和导出export

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。然后在当前模块下，使用被重命名的名字。

导入import和导出export

1.正常导出导入

2.默认导出

3.混合导入/导出

Guess you like