大话谈VUE之export const
生活随笔
收集整理的這篇文章主要介紹了
大话谈VUE之export 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;//這里可以直接使用aa({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:{}, // 展示1todaySituation: {orderNum1: '',price1: '',buyNum1: '',buyPrice1: ''}, // 展示2wholeSituation: {orderNum2: '',price2: '',buyNum2: '',buyPrice2: ''}}} }當然,這里是直接在頁面中寫的,如果是外部引用的話,是這樣:
import dea from 'demo1' //導入的時候可以給這個模塊任意取名字,且不需要用花括號就到這里吧,歡迎指正!
總結
以上是生活随笔為你收集整理的大话谈VUE之export const的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 袁老走好,谢谢您!我辈也当自强。
- 下一篇: Java游戏外挂基础