iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
自我挑戰組

從0開始vue.js的30天學習日誌系列 第 29

29 Vue組件 - props(3)

當寫了組件需要和他人協作,或者寫的組件越來越多的時候,就可能會用到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就提出了警告:
Imgur

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

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

type可以有以下幾種屬性:

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

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


上一篇
28 Vue組件 - props(2)
下一篇
30 Vue組件 - $emit發送自訂事件
系列文
從0開始vue.js的30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言