[[397998]]

首先你需要了解export，在創建JavaScript模塊時，export 語句用于從模塊中導出實時綁定的函數、對象或原始值，以便其他程序可以通過 import 語句使用它們。被導出的綁定值依然可以在本地進行修改。在使用import進行導入時，這些綁定值只能被導入模塊所讀取，但在export導出模塊中對這些綁定值進行修改，所修改的值也會實時地更新。

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

1.在a.js文件中寫下如下內容：

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(), // 時 
"M+": date.getMinutes().toString(), // 分 
"S+": date.getSeconds().toString() // 秒 
// 有其他格式化字符需求可以繼續添加，必須轉化成字符串 
}; 
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組件中通過import引用組件然后通過引用名稱加方法名獲取對應數據信息。

源碼示例：

<template> 
 
<el-card shadow="never" style="min-height: 10vh"> 
 
<div slot="header" class="clearfix"> 
 
<span>時間格式化組件</span> 
 
<el-input 
 
v-model="format" 
 
placeholder="請輸入內容" 
 
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> 

 此時便可獲取結果如下