export default / export const
export default
是默认导出export const
是命名导出
参考:Javascript (ES6), export const vs export default(基本上就是翻译这篇)
在一个vue文件中export const可以有多个,但是export default只有且仅有一个,{}表示导入非默认变量 , 也就是说文件中不使用export default导出的变量就需要加{}, 使用export default导出的就可以不加花括号
//demo1.js
// a
export const a = (params) => {
return axios({
method: 'post',
url: '/api/a/b.json',
data: qs.stringify(params)
})
}
// b
export const b= (params) => {
return axios({
method: 'post',
url: '/api/a/b.json',
data: qs.stringify(params)
})
}
// c
export const c= (params) => {
return axios({
method: 'post',
url: '/api/a/b.json',
data: qs.stringify(params)
})
}
在vue页面中可以引用多个
import {a} from 'demo1'
import {b} from 'demo1'
import {c} from 'demo1'
或
import {a,b,c} from 'demo1'
而export default的使用为:
//demo.vue
export default {
name: 'index',
data() {
return {
menuDataLimit:{},
// 展示1
todaySituation: {
orderNum1: '',
price1: '',
buyNum1: '',
buyPrice1: ''
},
// 展示2
wholeSituation: {
orderNum2: '',
price2: '',
buyNum2: '',
buyPrice2: ''
}
}
}
}
当然,这里是直接在页面中写的,如果是外部引用的话,是这样:
import dea from 'demo1' //导入的时候可以给这个模块任意取名字,且不需要用花括号