溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了Vue.js組件props數據驗證的具體代碼，供大家參考，具體內容如下
數據驗證
一般當組件需要提供給別人使用時，就需要使用數據驗證。
示例：
<script>
Vue.component('my-component',{
props:{
//必須是數字類型
propA: Number,
//必須是字符串或數字類型
propB:[String, Number],
//布爾值，如果沒有定義，默認值就是true
propC:{
type: Boolean,
default: true
},
//數字，而且是必選
propD: {
type: Number,
required: true
},
//如果是數組或對象，默認值必須是一個函數來返回
propE: {
type: Array,
default: function () {
return {};
}
},
//自定義驗證函數
propF: {
viladator: function (value) {
return value > 10;
}
}
}
});
</script>
驗證的type類型可以是：
type也可以是一個自定義構造器，使用instanceof檢測。當prop驗證失敗時，開發版本下會在控制臺拋出一條警告。
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>組件：參數驗證</title>
</head>
<body>
<!--為組件中接受到的變量進行邏輯驗證-->
<div id="myApp">
<h2>身世之謎</h2>
<show-member-info name="koma" :age="25" :detail="{address:'earth',language:'世界語'}"></show-member-info>
</div>
<script>
Vue.component('show-member-info',{
props: {
name: {
type: String,//類型
required: true,//必選，不選報錯
},
age: {
type: Number,
validator: function (value) {
return value >= 0 && value <=130;
}
},
detail: {
type: Object,
default: function () {
return {
address: 'US',
language: 'English'
};
}
}
},
template: '<div>姓名：{{this.name}}<br/>'
+ '年齡：{{this.age}}歲<br/>'
+ '地址：{{this.detail.address}}<br/>'
+ '語言：{{this.detail.language}}</div>'
});
var myApp = new Vue({
el: '#myApp'
});
</script>
</body>
</html>
更多教程點擊《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
