1.export 可以导出多个对象,export default只能导出一个
export default示例:
// a.js
export default axios
// b.js
import axioslong from 'a.js' // 这是简写
import {default as axioslong} from 'a.js' // 这是正常写法
//注意 1.引入export defult导出的内容无需使用{}
2.这里的axiosLong可以是任意的名字,不用和default之后的名字保持一致
export示例:
// a.js
// 第一种写法
export const str = 'lx'
export const fn = () => {}
// 第二种写法
const str = 'lx'
const fn = () => {}
export { str, fn }
// b.js
import { str, fn } from 'a.js'
//注意 1.引入export导出的内容要使用{}
2.导出的名字和引入的名字要保持一致
2.export default 后面不能跟 const var let会报错 ,export后面可以跟。
错误写法:
export default const footer = (
<h1>
<span>我是footer</span>
</h1>
)
正确写法:
// 导出函数
第一种写法:
export default (params) => {}
第二种写法:
const footer = (params) => {}
export default footer
3.export 和 export default可以混用
// a.js
export const str = 'lx'
export default axios
// b.js
import { str as str2 }, axios from 'a.js' // 可以使用as给{}里的变量起别名
ReactDOM.render(
str2,
document.getElementById('root')
);
4.使用export default导出多个js,引用的的时候需要挨个引入不同的js名字,这时我们可以在文件夹下新建一个index.js,将所有的js统一导出。例如
在index.js写入以下代码 :
export { default as getQuery } from './js/getQuery'
export { default as getUserInfo } from './js/getUserInfo'
export { default as userIsLogin } from './js/userIsLogin'
// 这种写法相当于先import再export导出
import {default as getQuery} from './js/getQuery‘
export getQuery
引用:
import { userIsLogin, getUserInfo } from @common