ES6：export default 和 export 区别

 

ES6：export default 和 export 区别

之前多个ajax请求封装，返回出现问题就是多写了 default

https://www.jianshu.com/p/edaf43e9384f

 

推荐小项目使用export，阅读代码更方便，好像也更节省性能？

 大项目使用export default，好处在于可以自定义属性名称，这样就可以避免命名冲突了。

export 导出多个参数

// abc.js
export const aa = '1111'
export const bb = ()=>{
    return aa + '2222'
}
 
const cc = (title)=>{
    alert(title)
}
export {cc};

 

 

export default如何导出多个参数

// abcDefault.js
const aa = '1111'
const bb = ()=>{
    return aa + '2222'
}
 
const cc = (title)=>{
    alert(title)
}
export default {aa,bb,cc};

 

main.js引用同级util文件夹内的 abc.js 和 abcDefault.js 

引用和定义

// export   引入 
import {aa,bb,cc} from './util/abc.js'
// export default  引入
import abcDefault from './util/abcDefault.js'

// export   定义
Vue.prototype.$abc = {aa, bb, cc};
console.log(aa)
// 1111
console.log(bb)
// ƒ bb() {
//  return aa + '2222';
// }
console.log(cc)
// ƒ cc(title) {
//   alert(title);
// }

// export default   定义
Vue.prototype.$abcDefault = {aa:abcDefault.aa, bb:abcDefault.bb, cc:abcDefault.cc};
console.log(abcDefault.aa)
// 1111
console.log(abcDefault.bb)
// ƒ bb() {
//  return aa + '2222';
// }
console.log(abcDefault.cc)
// ƒ cc(title) {
//   alert(title);
// }

 

App.vue 调用定义对应的内容

 

mounted(){
                // export 调用
        console.log(this.$abc.aa)
        // 1111
        console.log(this.$abc.bb())
        // 11112222
        this.$abc.cc('提示')
        // alert('提示')
        
                // export default 调用
        console.log(this.$abcDefault.aa)
        // 1111
        console.log(this.$abcDefault.bb())
        // 11112222
        this.$abcDefault.cc('提示default')
        // alert('提示default')
},