Vue之mixin全域性的用法詳解
個人覺得全域性mixin就是給全部Vue檔案新增一些公用的例項(方法,過濾器and so on)
使用場景:貨幣單位,時間格式。這些如果在用到的頁面使用的話程式碼會重複的很多,所以在全域性混入這些例項會減少程式碼量,可維護性也比較高。
ex:
step1: 先定義mixin.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
* @param {string|number|object|Array} dateTime - 時間,可以是一個字串、時間戳、表示時間的物件、Date物件或者******表示時間的陣列
formatDate (dateTime, fmt = 'YYYY年M月DD日 HH:mm:ss' ) {
|
step2:在main.js檔案裡面
1 2 |
|
全域性混入是.mixin沒有s
step3:在你的vue檔案裡面就可以使用mixin裡面定義好的東西比如
1 2 3 4 5 6 7 8 |
|
這個vue檔案的資料來源data裡面的time就是引用混入進來的方法。
使用mixins裡的方法
設定路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
頁面呼叫mixins裡的loadPage方法
1 |
|
Index頁面如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|