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' //導入的時候可以給這個模塊任意取名字,且不需要用花括號