VueJs組件prop驗證簡單介紹
更新時間：2017年09月12日 15:05:09 作者：CLtomoya
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時候對傳入的值做判斷，今天小編通過一個小例子給大家分享VueJs組件prop驗證簡單理解，感興趣的朋友一起看看吧
組件
Vue.js引入的組件，讓分解單一HTML到獨立組件成為可能。組件可以自定義元素形式使用，或者使用原生元素但是以is特性做擴展。
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時候對傳入的值做判斷，寫了個小例子。
<div id="app">
<my-child
:num="100"
:msg="'sdf'"
:object="{a:'a'}"
:cust="100"
></child>
</div>
<script type="text/javascript">
Vue.component('my-child', {
props: {
// 基礎類型檢測 (`null` 意思是任何類型都可以)
num: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
msg: {
type: String,
required: true
},
// 數(shù)字，有默認值
num1: {
type: Number,
default: 1000
},
// 數(shù)組/對象的默認值應當由一個工廠函數(shù)返回
object: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定義驗證函數(shù)
cust: {
validator: function (value) {
return value > 10
}
}
},
template: `<div>
<p>{{ num }}</p>
<p>{{ msg }}</p>
<p>{{ num1 }}</p>
<p>{{ object }}</p>
<p>{{ cust }}</p>
</div>`
})
new Vue({
el: "#app"
});
</script>
輸出結果
這里都是通過驗證了的，能夠全部輸出來，而且控制臺沒有報錯。
如果有不符合的，控制臺會報錯。
<div id="app">
<my-child
:num="asd"
:msg="sdf"
:object="{a:'a'}"
:cust="100"
></child>
</div>
對應的，也沒有渲染出來
但是也有一些是報錯了但是渲染出來的。比如
<div id="app">
<my-child
:num="100"
:msg="'sdf'"
:object="{a:'a'}"
:cust="1"
></child>
</div>
所以，這個驗證功能多的還是用作于開發(fā)，或者說寫的組件讓別的開發(fā)者使用是做的認證。（完全初學不太懂，如果有什么寫錯或者說這個驗證還有什么功能，請在評論寫下，先謝謝你了）
總結
以上所述是小編給大家介紹的VueJs組件prop驗證簡單理解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了基于VUE實現(xiàn)判斷設備是PC還是移動端,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要給大家介紹了關于vue3集成Element-Plus之全局導入和按需導入的相關資料,element-plus正是element-ui針對于vue3開發(fā)的一個UI組件庫,?它的使用方式和很多其他的組件庫是一樣的,需要的朋友可以參考下2023-07-07
在?Web?應用程序中,有時需要為某些內容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個全屏功能的工具類,希望對大家有所幫助2024-03-03
在開發(fā)webapp的時候總是會受到首屏加載時間過長的影響，越來越多的APP采用了“骨架屏”的方式去提升用戶體驗。這篇文章主要介紹了Vue頁面骨架屏的實現(xiàn)方法,感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了Vue中的單向數(shù)據(jù)流原則,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
vue實現(xiàn)動態(tài)顯示與隱藏底部導航的方法分析
這篇文章主要介紹了vue實現(xiàn)動態(tài)顯示與隱藏底部導航的方法,結合實例形式分析了vue.js針對導航隱藏與顯示的路由配置、事件監(jiān)聽等相關操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要為大家詳細介紹了vue+elementUi圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求,比如在開發(fā)一個聊天框時,請求接口拿到消息列表數(shù)據(jù),展示到前端頁面時,需要讓滾動條自動滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設置滾動條自動保持到最底端,需要的朋友可以參考下2024-08-08
這篇文章主要介紹的是Vue子組件與父組件，什么是父組件，什么是子組件很多時候面對這個問題我們都會有所混淆，下面文章我們就來詳細介紹,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了vue實現(xiàn)微信獲取用戶信息的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03