Vue之mixin(全域性)

2021-08-14 13:20:07 字數 911 閱讀 8320

先貼上官方定義。

個人覺得全域性mixin就是給全部vue檔案新增一些公用的例項(方法,過濾器and so on)

使用場景:貨幣單位,時間格式。這些如果在用到的頁面使用的話**會重複的很多,所以在全域性混入這些例項會減少**量,可維護性也比較高。

ex:step1: 先定義mixin.js

const mixin =  datetime - 時間,可以是乙個字串、時間戳、表示時間的物件、date物件或者******表示時間的陣列

* @param [fmt] - 格式

* @returns 返回格式化後的日期時間,預設格式:2023年1月11日 15:00

* @see [momentjs]

*/formatdate (datetime, fmt = 'yyyy年m月dd日 hh:mm:ss')

moment.locale('zh-cn')

datetime = moment(datetime).format(fmt)

return datetime

}}}export defaullt mixin

step2:在main.js檔案裡面

import mixin from './mixin'

vue.mixin(mixin)

全域性混入是.mixin沒有s

step3:在你的vue檔案裡面就可以使用mixin裡面定義好的東西比如

data() 

}

這個vue檔案的資料來源data裡面的time就是引用混入進來的方法。

至此,全域性混入大功告成,有心的讀者也可以試試區域性混入(主要用於後期**維護)。

以上內容僅代表我的拙見,希望能拋磚引玉。有不正確的地方希望大牛們多多指正批評

Vue之mixin全域性的用法詳解

個人覺得全域性mixin就是給全部vue檔案新增一些公用的例項 方法,過濾器and so on 使用場景 貨幣單位,時間格式。這些如果在用到的頁面使用的話 會重複的很多,所以在全域性混入這些例項會減少 量,可維護性也比較高。ex step1 先定義mixin.js const mixin datet...

應用三 Vue之混入 mixin 與全域性混入

注 本文適用於有一定vue基礎或開發經驗的讀者,文章就知識點的講解不一定全面,但卻是開發過程中很實用的 首先介紹一下混入mixin的概念 官方文件 混入提供了一種非常靈活的方式,來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時,所有混入物件的選項將被 混合 ...

應用三 Vue之混入 mixin 與全域性混入

注 本文適用於有一定vue基礎或開發經驗的讀者,文章就知識點的講解不一定全面,但卻是開發過程中很實用的 首先介紹一下混入mixin的概念 官方文件 混入提供了一種非常靈活的方式,來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時,所有混入物件的選項將被 混合 ...