解決vue prop傳值default屬性如何使用,為何不生效的問題
更新時(shí)間：2020年09月21日 09:49:15 作者：龍旗飄揚(yáng)的艦隊(duì)
這篇文章主要介紹了解決vue prop傳值default屬性如何使用,為何不生效的問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
如果在template中，顯示的調(diào)用了 prop 屬性，那么 default 屬性就不會(huì)生效
如果在template中，不調(diào)用 prop 屬性，default 就會(huì)生效
default 值有效與否，和 prop 的驗(yàn)證通不通過，沒有關(guān)系
//聲明
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>
補(bǔ)充知識(shí)：vue prop不同數(shù)據(jù)類型(數(shù)組，對(duì)象..)設(shè)置默認(rèn)值
vue prop 會(huì)接收不同的數(shù)據(jù)類型，這里列出了 常用的數(shù)據(jù)類型的設(shè)置默認(rèn)值的寫法,其中包含： 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屬性如何使用,為何不生效的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中實(shí)現(xiàn)動(dòng)態(tài)右鍵菜單的示例代碼
在前端開發(fā)中,實(shí)現(xiàn)自定義右鍵菜單能夠?yàn)橛脩籼峁└喙δ苓x項(xiàng),本文就來(lái)介紹了Vue中實(shí)現(xiàn)動(dòng)態(tài)右鍵菜單的示例代碼,感興趣的可以了解一下2024-11-11
watch 函數(shù)用來(lái)偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于Vue3中watch監(jiān)聽使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽屬性的使用和區(qū)別,本文通過示例代碼給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
這篇文章主要為大家介紹了vue pdf二次封裝解決無(wú)法顯示中文問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
關(guān)于Vue中keep-alive的作用及使用方法
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，該組件將不會(huì)銷毀，這篇文章主要介紹了關(guān)于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以參考下2023-04-04
vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要介紹了vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
本文給大家分享了VUE制作點(diǎn)擊按鈕出現(xiàn)水波紋效果的組件過程，對(duì)此有需求的朋友可以跟著學(xué)習(xí)下。2018-04-04
vue+element 多個(gè)相同的select不允許重復(fù)選擇問題
這篇文章主要介紹了vue+element 多個(gè)相同的select不允許重復(fù)選擇問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-07-07
這篇文章主要為大家詳細(xì)介紹了vant時(shí)間控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue組件實(shí)例間的直接訪問實(shí)現(xiàn)代碼
在組件實(shí)例中，Vue提供了相應(yīng)的屬性，包括$parent、$children、$refs和$root，這些屬性都掛載在組件的this上。本文將詳細(xì)介紹Vue組件實(shí)例間的直接訪問,需要的朋友可以參考下2017-08-08