在Vue中,props是一種用于組件間通信的機制,可以讓父組件向子組件傳遞參數。props有時候需要提供某種默認值,這時就需要使用默認函數。默認函數可以返回一個對象,或者一個函數,具體的實現方式會根據props的類型和需求而定。
props: { size: { type: String, default: function () { return 'normal' } } }
上述代碼中,props中size的default屬性指定了一個函數,返回的字符串值為'normal'。如果父組件沒有傳遞size參數,則默認為'normal'。default屬性可以設置為任意類型的值,如數字、數組等等,也可以返回一個箭頭函數,來簡化代碼。
props: { items: { type: Array, default () { return [] } } }
當props的默認值是對象類型時,注意不要將default設置為一個空對象,因為這會導致所有的子組件實例共享同一個對象!正確的寫法應當返回一個函數,返回一個全新的對象。
props: { options: { type: Object, default: function () { return {} } } }
有時候需要在默認函數中根據其它props或data的值計算出新的默認值,這時可以通過訪問this來獲得父組件的數據。如下面的例子,當disabled屬性為true時,自動將默認樣式改為灰色。
props: { disabled: Boolean, color: { type: String, default () { if (this.disabled) { return 'gray' } return 'blue' } } }
需要注意的是,如果props的默認值是一個對象或數組,應當通過函數返回一個新的對象或數組,而不是對原先的對象或數組進行修改。這樣可以確保在數據變更時不會影響到其它組件共用的默認值。
props: { items: { type: Array, default () { return [] } } }
總之,在編寫Vue組件時,props的默認值是一個非常實用的功能。可以通過默認函數來給props提供一個初始值,合理地引導父組件的行為。具體的實現方式會依賴于props的類型和需求,讀者應當根據具體情況來決定是否使用默認函數。同時還需要注意到js中默認函數的執行時機是在組件實例化之前,所以不要將默認值設置為依賴組件實例的操作。