大话谈VUE之export const
最近在整理项目,想了解一下VUE这个前后端分离的框架,这里没有顺序,遇到什么就写写,目的只是为了给自己加深印象和交流指正之用。谈到export const,就有必要说到export default,那么这两个有什么区别呢?在一个vue文件中export const可以有多个,但是export default只有且仅有一个;比如://demo1.js// aexport const...
·
最近在整理项目,想了解一下VUE这个前后端分离的框架,这里没有顺序,遇到什么就写写,目的只是为了给自己加深印象和交流指正之用。
谈到export const,就有必要说到export default,那么这两个有什么区别呢?
在一个vue文件中export const可以有多个,但是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页面中可以引用多个,
//demo.vue
import {a} from 'demo1'
import {b} from 'demo1'
import {c} from 'demo1'
或
import {a,b,c} from 'demo1'
此时可以在页面中直接使用,
//demo.vue
getA(dateType) {
const self = this;
//这里可以直接使用a
a({dateType:dateType}).then(res => {
if (res.data.returnCode === 0) {
const returnData = res.data.returnData;
const x= returnData.xAxisDataList;
const ya= returnData.yAxisOrderNumDataList;
const yb= returnData.yAxisSalesPriceDataList;
const sg= returnData.seriesSaleGross;
const legend = {
data:['1','2','3'],
bottom: 'bottom',
}
}
}
}
而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' //导入的时候可以给这个模块任意取名字,且不需要用花括号
就到这里吧,欢迎指正!
更多推荐
已为社区贡献2条内容
所有评论(0)