vue組件開發(fā)props驗證的實現(xiàn)
使用props
在Vue中父組件向子組件中傳送數(shù)據(jù)是通過props實現(xiàn)的，一個簡單的使用props的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: ['fooMessage'],
template: '<div> {{ fooMessage }} </div>'
};
var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 123
}
});
</script>
</body>
</html>
為什么要有props驗證
但是上面這種方式是建立在大家都很遵守約定的情況下的，想象一下當(dāng)有一個人要使用foo-component組件的時候，他可能對于其要接受的參數(shù)有什么要求并不是很清楚，因此傳入的參數(shù)可能會在開發(fā)子組件的人的意料之外，程序就會發(fā)生錯誤，就像我們在函數(shù)調(diào)用之前先檢查一下函數(shù)一樣，props也可以進(jìn)行一個預(yù)先檢查。
平時調(diào)用函數(shù)的時候在函數(shù)開頭的地方都是一坨糊糊的參數(shù)檢查，這種寫法很不好了，所有后來就有了校驗器模式（別去百度了，我隨口取的名字），校驗器模式就是指把在函數(shù)開頭的對參數(shù)校驗的部分提取出來作為一個公共的部分來管理，讓一個什么東西來專門負(fù)責(zé)校驗，當(dāng)類型不正確的時候就拋個異常根本不去調(diào)用這個函數(shù)，很多框架設(shè)計時都是這么設(shè)計的（Spring MVC、Struts2等等），props也提供了這個功能，想一下如果沒有這個功能的話，為了保證正確性我們可能需要在每次使用props屬性之前都寫一坨代碼來檢查。校驗器最大的好處就是大多數(shù)情況下我們只需要聲明我需要什么樣的數(shù)據(jù)，讓校驗器檢查好了再塞給我。
type
可以使用type來聲明這個參數(shù)可以接受的數(shù)據(jù)的類型，當(dāng)檢查規(guī)則只有一個的時候type可以略寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: {
fooMessage: Number
},
template: '<div> {{ fooMessage }} </div>'
};
var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 123
}
});
</script>
</body>
</html>
當(dāng)傳入的參數(shù)類型不正確的時候Vue會發(fā)出提示：
type接受多個類型
當(dāng)參數(shù)可以是多種類型的其中一個的時候，使用數(shù)組來表示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: {
fooMessage: [Number, String]
},
template: '<div> {{ fooMessage }} </div>'
};
var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 123
}
});
</script>
</body>
</html>
type能夠指定的類型
type可以是以下原生類型：
- String
- Number
- Boolean
- Function
- Object
- Array
- Symbol
required
可以使用required選項來聲明這個參數(shù)是否必須傳入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: {
fooMessage: {
type: Number,
required: true
}
},
template: '<div> {{ fooMessage }} </div>'
};
var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 256
}
});
</script>
</body>
</html>
當(dāng)未傳入?yún)?shù)時：
default
使用default選項來指定當(dāng)父組件未傳入?yún)?shù)時props變量的默認(rèn)值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
<foo-component></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: {
fooMessage: {
type: Number,
default: 128
}
},
template: '<div> {{ fooMessage }} </div>'
};
var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 256
}
});
</script>
</body>
</html>
當(dāng)父組件未傳入?yún)?shù)時子組件的值是128，當(dāng)父組件傳入?yún)?shù)時是其指定的參數(shù)，比如這里可以是256。
當(dāng)type的類型為Array或者Object的時候default必須是一個函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
<foo-component></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: {
fooMessage: {
type: Array,
default: function(){
return ['foo', 'bar'];
}
}
},
template: '<div> {{ fooMessage }} </div>'
};
var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: ['f', 'o', 'o']
}
});
</script>
</body>
</html>
required && default ???
那么required和default是否能同時出現(xiàn)在一個props變量中呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
<foo-component></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: {
fooMessage: {
type: Number,
required: true,
default: 128
}
},
template: '<div> {{ fooMessage }} </div>'
};
var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 256
}
});
</script>
</body>
</html>
渲染結(jié)果：
盡管控制臺上Vue報了錯誤，但是props變量fooMessage還是使用了設(shè)置的default值。
事情不會這么簡單，再測試一下其它的情況，比如當(dāng)傳入的參數(shù)驗證不通過的時候：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: {
fooMessage: {
type: Number
}
},
template: '<div> {{ fooMessage }} </div>'
};
var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 'foobar'
}
});
</script>
</body>
</html>
渲染結(jié)果：
fooMessage要求的類型是Number，傳入了一個String類型的，盡管在控制臺提示報了錯，但是仍然將其渲染了出來。
由此可以得出一個結(jié)論：Vue的props校驗只是提供一個參考，并不是強制性的。
validator
當(dāng)校驗規(guī)則很復(fù)雜，默認(rèn)提供的校驗規(guī)則無法滿足的時候可以使用自定義函數(shù)來校驗。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: {
fooMessage: {
validator: function(value){
return value>=0 && value<=128;
}
}
},
template: '<div> {{ fooMessage }} </div>'
};
var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 100
}
});
</script>
</body>
</html>
一個綜合的例子
props: {
// fooA只接受數(shù)值類型的參數(shù)
fooA: Number,
// fooB可以接受字符串和數(shù)值類型的參數(shù)
fooB: [String, Number],
// fooC可以接受字符串類型的參數(shù)，并且這個參數(shù)必須傳入
fooC: {
type: String,
required: true
},
// fooD接受數(shù)值類型的參數(shù)，如果不傳入的話默認(rèn)就是100
fooD: {
type: Number,
default: 100
},
// fooE接受對象類型的參數(shù)
fooE: {
type: Object,
// 當(dāng)為對象類型設(shè)置默認(rèn)值時必須使用函數(shù)返回
default: function(){
return { message: 'Hello, world' }
}
},
// fooF使用一個自定義的驗證器
fooF: {
validator: function(value){
return value>=0 && value<=100;
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue循環(huán)中多個input綁定指定v-model實例
這篇文章主要介紹了Vue循環(huán)中多個input綁定指定v-model實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
今天小編就為大家分享一篇在Vue項目中,防止頁面被縮放和放大示例，具有很好的參考 價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要和大家分享一下vue中打印指定組件內(nèi)容,多頁打印自動適配紙張大小打印的方案,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-03-03
在正式使用Vue進(jìn)行移動端頁面開發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)移動端h5環(huán)境搭建的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue+element-ui+sortable.js實現(xiàn)表格拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+sortable.js實現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總(推薦)
dhtmlxGantt一個功能豐富的甘特圖插件，支持任務(wù)編輯，資源分配和多種視圖模式，這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了VUE+SpringBoot實現(xiàn)分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
下面小編就為大家分享一篇完美解決axios在ie下的兼容性問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3.3?+?TS4構(gòu)建實現(xiàn)ElementPlus功能的組件庫示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類型言語,它能夠讓開發(fā)人員在編寫代碼時愈加平安和高效,本文將引見如何運用?Vue.js?3.3?和?TypeScript?4?構(gòu)建一個自主打造媲美?ElementPlus?的組件庫2023-10-10
Vue路由鉤子之a(chǎn)fterEach beforeEach的區(qū)別詳解
這篇文章主要介紹了Vue路由鉤子 afterEach beforeEach區(qū)別 ,vue-router作為vue里面最基礎(chǔ)的服務(wù),學(xué)習(xí)一段時間,對遇到的需求進(jìn)行一些總結(jié)。需要的朋友可以參考下2018-07-07