解決vue prop傳值default屬性如何使用,為何不生效的問(wèn)題
如果在template中，顯示的調(diào)用了 prop 屬性，那么 default 屬性就不會(huì)生效
如果在template中，不調(diào)用 prop 屬性，default 就會(huì)生效
default 值有效與否，和 prop 的驗(yàn)證通不通過(guò)，沒(méi)有關(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ù)類(lèi)型(數(shù)組，對(duì)象..)設(shè)置默認(rèn)值
vue prop 會(huì)接收不同的數(shù)據(jù)類(lèi)型，這里列出了 常用的數(shù)據(jù)類(lèi)型的設(shè)置默認(rèn)值的寫(xiě)法,其中包含： 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屬性如何使用,為何不生效的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁(yè)面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁(yè)面效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
Vue實(shí)現(xiàn)DateRange選擇器的禁選功能
在基于Vue.js構(gòu)建的應(yīng)用程序中,處理日期選擇器是一個(gè)常見(jiàn)的需求,尤其是在涉及到日期范圍的選擇時(shí),Vue提供了多種方式來(lái)實(shí)現(xiàn)日期選擇器的功能,并允許我們對(duì)這些組件進(jìn)行高度定制,本文將深入探討如何在Vue應(yīng)用中實(shí)現(xiàn)DateRange選擇器的禁選功能,需要的朋友可以參考下2024-10-10
vant van-list下拉加載更多onload事件問(wèn)題
這篇文章主要介紹了vant van-list下拉加載更多onload事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue element實(shí)現(xiàn)表格增加刪除修改數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue element實(shí)現(xiàn)表格增加刪除修改數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解
今天小編就為大家分享一篇對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了vue中的自定義分頁(yè)插件組件的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue項(xiàng)目打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404的解決
這篇文章主要介紹了Vue項(xiàng)目打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue中使用input[type="file"]實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了vue中使用input[type="file"]實(shí)現(xiàn)文件上傳功能，實(shí)現(xiàn)代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
如何處理vue router 路由傳參刷新頁(yè)面參數(shù)丟失
這篇文章主要介紹了如何處理vue router 路由傳參刷新頁(yè)面參數(shù)丟失，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
最近有個(gè)需求，一個(gè)列表上下移動(dòng)要有簡(jiǎn)單過(guò)渡效果。本文通過(guò)實(shí)例代碼給大家介紹Vue 列表上下過(guò)渡效果,需要的朋友可以參考下2019-06-06