解決vue prop傳值default屬性如何使用,為何不生效的問題
更新時間：2020年09月21日 09:49:15 作者：龍旗飄揚的艦隊
這篇文章主要介紹了解決vue prop傳值default屬性如何使用,為何不生效的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如果在template中，顯示的調(diào)用了 prop 屬性，那么 default 屬性就不會生效
如果在template中，不調(diào)用 prop 屬性，default 就會生效
default 值有效與否，和 prop 的驗證通不通過，沒有關系
//聲明
Vue.component("blog-post", {
props: {
postTitle: {
type: Number,
default: 10000
}
},
template: "<h3>{{ postTitle }}</h3>"
});
//在template中，顯示調(diào)用prop 屬性，default不生效
<blog-post :postTitle="54"></blog-post>
//在template中，不調(diào)用prop 屬性，default生效
<blog-post></blog-post>
補充知識：vue prop不同數(shù)據(jù)類型(數(shù)組，對象..)設置默認值
vue prop 會接收不同的數(shù)據(jù)類型，這里列出了 常用的數(shù)據(jù)類型的設置默認值的寫法,其中包含： Number, String, Boolean, Array, Function, Object
refAge: {
type: Number,
default: 0
},
refName: {
type: String,
default: ''
},
hotDataLoading: {
type: Boolean,
default: false
},
hotData: {
type: Array,
default: () => {
return []
}
},
getParams: {
type: Function,
default: () => () => {}
},
meta: {
type: Object,
default: () => ({})
}
以上這篇解決vue prop傳值default屬性如何使用,為何不生效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
keep-Alive搭配vue-router實現(xiàn)緩存頁面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實現(xiàn)緩存頁面效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
在基于Vue.js構建的應用程序中,處理日期選擇器是一個常見的需求,尤其是在涉及到日期范圍的選擇時,Vue提供了多種方式來實現(xiàn)日期選擇器的功能,并允許我們對這些組件進行高度定制,本文將深入探討如何在Vue應用中實現(xiàn)DateRange選擇器的禁選功能,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vant van-list下拉加載更多onload事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue element實現(xiàn)表格增加刪除修改數(shù)據(jù)
這篇文章主要為大家詳細介紹了vue element實現(xiàn)表格增加刪除修改數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
對Vue table 動態(tài)表格td可編輯的方法詳解
今天小編就為大家分享一篇對Vue table 動態(tài)表格td可編輯的方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中的自定義分頁插件組件的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue項目打包到服務器后請求接口報錯404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue中使用input[type="file"]實現(xiàn)文件上傳功能
這篇文章主要介紹了vue中使用input[type="file"]實現(xiàn)文件上傳功能，實現(xiàn)代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
如何處理vue router 路由傳參刷新頁面參數(shù)丟失
這篇文章主要介紹了如何處理vue router 路由傳參刷新頁面參數(shù)丟失，對vue感興趣的同學，可以參考下2021-05-05
最近有個需求，一個列表上下移動要有簡單過渡效果。本文通過實例代碼給大家介紹Vue 列表上下過渡效果,需要的朋友可以參考下2019-06-06