[[397998]]

首先你需要了解export，在創(chuàng)建JavaScript模塊時(shí)，export 語(yǔ)句用于從模塊中導(dǎo)出實(shí)時(shí)綁定的函數(shù)、對(duì)象或原始值，以便其他程序可以通過(guò) import 語(yǔ)句使用它們。被導(dǎo)出的綁定值依然可以在本地進(jìn)行修改。在使用import進(jìn)行導(dǎo)入時(shí)，這些綁定值只能被導(dǎo)入模塊所讀取，但在export導(dǎo)出模塊中對(duì)這些綁定值進(jìn)行修改，所修改的值也會(huì)實(shí)時(shí)地更新。

在文件夾A中新建一個(gè)JS文件并命名為a.js，然后聲明一個(gè)組件b并命名為b.vue。

1.在a.js文件中寫(xiě)下如下內(nèi)容：

et dateFormat={ 
date(fmt, date) { 
date=new Date() 
let ret; 
const opt = { 
"Y+": date.getFullYear().toString(), // 年 
"m+": (date.getMonth() + 1).toString(), // 月 
"d+": date.getDate().toString(), // 日 
"H+": date.getHours().toString(), // 時(shí) 
"M+": date.getMinutes().toString(), // 分 
"S+": date.getSeconds().toString() // 秒 
// 有其他格式化字符需求可以繼續(xù)添加，必須轉(zhuǎn)化成字符串 
}; 
for (let k in opt) { 
ret = new RegExp("(" + k + ")").exec(fmt); 
if (ret) { 
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) 
} 
} 
return fmt; 
} 
} 
export default dateFormat; 

 2.、然后在b.vue組件中通過(guò)import引用組件然后通過(guò)引用名稱(chēng)加方法名獲取對(duì)應(yīng)數(shù)據(jù)信息。

源碼示例：

<template> 
 
<el-card shadow="never" style="min-height: 10vh"> 
 
<div slot="header" class="clearfix"> 
 
<span>時(shí)間格式化組件</span> 
 
<el-input 
 
v-model="format" 
 
placeholder="請(qǐng)輸入內(nèi)容" 
 
style="width:200px;float:right" 
 
size="small" 
 
@change="format_value" 
 
></el-input> 
 
</div> 
 
<div> 
 
{{date}} 
 
</div> 
 
</el-card> 
 
</template> 
 
<script> 
 
import dateformat from "@/eui/unit/tool/form/DateFormat.js"; 
 
export default { 
 
data() { 
 
return { 
 
date: "", 
 
format: "YYYY-mm-dd HH:MM:SS" 
 
}; 
 
}, 
 
methods: { 
 
format_value(data){ 
 
this.date=dateformat.date(data) 
 
} 
 
}, 
 
mounted() { 
 
this.date=dateformat.date("YYYY-mm-dd HH:MM:SS") 
 
} 
 
}; 
 
</script> 

 此時(shí)便可獲取結(jié)果如下