當寫了組件需要和他人協作，或者寫的組件越來越多的時候，就可能會用到props驗證規則，當不符合的時候Vue就會提出警告。

這邊範例一樣用寫到膩的counter，key start為props的名稱，資料型態定義為Number，並傳入字串10，看看會發生什麼事：

<div id="app">
  <counter start="10"></counter>
</div>

<script>
Vue.component('counter',{
  props:{
    start:Number,
    }
  },
  data(){
    return {
      count: this.start,
    }
  },
  template:`
    <div>
      <h1>{{count}}</h1>
      <button @click="count_=1"></button>
    </div>
`
});
new Vue({
  el:"#app"
});
</script>

因為傳入的資料不符合定義的型態，Vue就提出了警告：

除了直接給定資料型態外，還可以用物件包起來額外做幾項驗證的設定：

Vue.component('counter',{
  props:{
      start:{
        //定義資料型態
        type:Number,
        
        //當沒有給props時的預設值
        default: 0, 
        
        //取輸入的值做檢驗是否有效
        validator(value){ 
          return value <= 10;
        }
      }
  }
});

type可以有以下幾種屬性：

• String
• Number
• Boolean
• Function
• Object
• Array

另外要注意的一點是，props的檢驗是發生在組件建立之前，所以裡面不能使用data、computed、methods等Vue實例的屬性。