解決vue prop傳值default屬性如何使用,為何不生效的問題

2020-09-21 12:00:33

如果在template中，顯示的呼叫了 prop 屬性，那麼 default 屬性就不會生效

如果在template中，不呼叫 prop 屬性，default 就會生效

default 值有效與否，和 prop 的驗證通不通過，沒有關係

//宣告
Vue.component("blog-post", {
 props: {
  postTitle: {
   type: Number,
   default: 10000
  }
 },
 template: "<h3>{{ postTitle }}</h3>"
});
//在template中，顯示呼叫prop 屬性，default不生效
<blog-post :postTitle="54"></blog-post>
//在template中，不呼叫prop 屬性，default生效
<blog-post></blog-post>

補充知識：vue prop不同資料型別(陣列，物件..)設定預設值

vue prop 會接收不同的資料型別，這裡列出了常用的資料型別的設定預設值的寫法,其中包含： 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屬性如何使用,為何不生效的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援it145.com。

解決vue prop傳值default屬性如何使用,為何不生效的問題

熱門文章