VueJs組件prop驗(yàn)證簡單介紹

更新時(shí)間：2017年09月12日 15:05:09 作者：CLtomoya

今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時(shí)候?qū)魅氲闹底雠袛?，今天小編通過一個小例子給大家分享VueJs組件prop驗(yàn)證簡單理解，感興趣的朋友一起看看吧

組件

Vue.js引入的組件，讓分解單一HTML到獨(dú)立組件成為可能。組件可以自定義元素形式使用，或者使用原生元素但是以is特性做擴(kuò)展。

今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時(shí)候?qū)魅氲闹底雠袛?，寫了個小例子。

<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: {
    // 基礎(chǔ)類型檢測 (`null` 意思是任何類型都可以)
    num: Number,
    // 多種類型
    propB: [String, Number],
    // 必傳且是字符串
    msg: {
     type: String,
     required: true
    },
    // 數(shù)字，有默認(rèn)值
    num1: {
     type: Number,
     default: 1000
    },
    // 數(shù)組/對象的默認(rèn)值應(yīng)當(dāng)由一個工廠函數(shù)返回
    object: {
     type: Object,
     default: function () {
     return { message: 'hello' }
     }
    },
    // 自定義驗(yàn)證函數(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>

輸出結(jié)果

這里都是通過驗(yàn)證了的，能夠全部輸出來，而且控制臺沒有報(bào)錯。
如果有不符合的，控制臺會報(bào)錯。

<div id="app">
  <my-child
   :num="asd"
   :msg="sdf"
   :object="{a:'a'}"
   :cust="100"
  ></child>
 </div>

對應(yīng)的，也沒有渲染出來

但是也有一些是報(bào)錯了但是渲染出來的。比如

<div id="app">
  <my-child
   :num="100"
   :msg="'sdf'"
   :object="{a:'a'}"
   :cust="1"
  ></child>
 </div>

所以，這個驗(yàn)證功能多的還是用作于開發(fā)，或者說寫的組件讓別的開發(fā)者使用是做的認(rèn)證。（完全初學(xué)不太懂，如果有什么寫錯或者說這個驗(yàn)證還有什么功能，請?jiān)谠u論寫下，先謝謝你了）

總結(jié)

以上所述是小編給大家介紹的VueJs組件prop驗(yàn)證簡單理解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

基于VUE實(shí)現(xiàn)判斷設(shè)備是PC還是移動端
這篇文章主要介紹了基于VUE實(shí)現(xiàn)判斷設(shè)備是PC還是移動端,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入
這篇文章主要給大家介紹了關(guān)于vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入的相關(guān)資料,element-plus正是element-ui針對于vue3開發(fā)的一個UI組件庫,?它的使用方式和很多其他的組件庫是一樣的,需要的朋友可以參考下
2023-07-07
基于Vue封裝實(shí)現(xiàn)全屏功能工具類
在?Web?應(yīng)用程序中,有時(shí)需要為某些內(nèi)容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個全屏功能的工具類,希望對大家有所幫助
2024-03-03
Vue頁面骨架屏的實(shí)現(xiàn)方法
在開發(fā)webapp的時(shí)候總是會受到首屏加載時(shí)間過長的影響，越來越多的APP采用了“骨架屏”的方式去提升用戶體驗(yàn)。這篇文章主要介紹了Vue頁面骨架屏的實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下
2018-05-05
Vue中的單向數(shù)據(jù)流原則詳解
這篇文章主要介紹了Vue中的單向數(shù)據(jù)流原則,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-03-03
vue實(shí)現(xiàn)動態(tài)顯示與隱藏底部導(dǎo)航的方法分析
這篇文章主要介紹了vue實(shí)現(xiàn)動態(tài)顯示與隱藏底部導(dǎo)航的方法,結(jié)合實(shí)例形式分析了vue.js針對導(dǎo)航隱藏與顯示的路由配置、事件監(jiān)聽等相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
vue+elementUi圖片上傳組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue+elementUi圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08
Vue如何設(shè)置滾動條自動保持到最底端
在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求,比如在開發(fā)一個聊天框時(shí),請求接口拿到消息列表數(shù)據(jù),展示到前端頁面時(shí),需要讓滾動條自動滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設(shè)置滾動條自動保持到最底端,需要的朋友可以參考下
2024-08-08
Vue子組件與父組件詳細(xì)解析
這篇文章主要介紹的是Vue子組件與父組件，什么是父組件，什么是子組件很多時(shí)候面對這個問題我們都會有所混淆，下面文章我們就來詳細(xì)介紹,需要的朋友可以參考一下
2021-10-10
vue實(shí)現(xiàn)微信獲取用戶信息的方法
這篇文章主要介紹了vue實(shí)現(xiàn)微信獲取用戶信息的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03