點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

vue組件開發(fā)props驗證的實現(xiàn)

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:01:01

vue組件開發(fā)props驗證的實現(xiàn)

vue組件開發(fā)props驗證的實現(xiàn):使用props 在Vue中父組件向子組件中傳送數(shù)據(jù)是通過props實現(xiàn)的，一個簡單的使用props的例子： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue Study</titl

推薦度：

點擊下載本文 文檔為doc格式

導讀vue組件開發(fā)props驗證的實現(xiàn):使用props 在Vue中父組件向子組件中傳送數(shù)據(jù)是通過props實現(xiàn)的，一個簡單的使用props的例子： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue Study</titl

使用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驗證

但是上面這種方式是建立在大家都很遵守約定的情況下的，想象一下當有一個人要使用foo-component組件的時候，他可能對于其要接受的參數(shù)有什么要求并不是很清楚，因此傳入的參數(shù)可能會在開發(fā)子組件的人的意料之外，程序就會發(fā)生錯誤，就像我們在函數(shù)調(diào)用之前先檢查一下函數(shù)一樣，props也可以進行一個預先檢查。

平時調(diào)用函數(shù)的時候在函數(shù)開頭的地方都是一坨糊糊的參數(shù)檢查，這種寫法很不好了，所有后來就有了校驗器模式（別去百度了，我隨口取的名字），校驗器模式就是指把在函數(shù)開頭的對參數(shù)校驗的部分提取出來作為一個公共的部分來管理，讓一個什么東西來專門負責校驗，當類型不正確的時候就拋個異常根本不去調(diào)用這個函數(shù)，很多框架設計時都是這么設計的（Spring MVC、Struts2等等），props也提供了這個功能，想一下如果沒有這個功能的話，為了保證正確性我們可能需要在每次使用props屬性之前都寫一坨代碼來檢查。校驗器最大的好處就是大多數(shù)情況下我們只需要聲明我需要什么樣的數(shù)據(jù)，讓校驗器檢查好了再塞給我。

type

可以使用type來聲明這個參數(shù)可以接受的數(shù)據(jù)的類型，當檢查規(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>

當傳入的參數(shù)類型不正確的時候Vue會發(fā)出提示：

type接受多個類型

當參數(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>

當未傳入?yún)?shù)時：

default

使用default選項來指定當父組件未傳入?yún)?shù)時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,
 default: 128
 }
 },
 template: '<div> {{ fooMessage }} </div>'
 };
 
 var vm = new Vue({
 components: {
 'foo-component': fooComponent
 },
 el: '#app',
 data: {
 fooMessage: 256
 }
 });
 
</script>
</body>
</html>

當父組件未傳入?yún)?shù)時子組件的值是128，當父組件傳入?yún)?shù)時是其指定的參數(shù)，比如這里可以是256。

當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還是使用了設置的default值。

事情不會這么簡單，再測試一下其它的情況，比如當傳入的參數(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

當校驗規(guī)則很復雜，默認提供的校驗規(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ù)，如果不傳入的話默認就是100
 fooD: {
 type: Number,
 default: 100
 },
 // fooE接受對象類型的參數(shù)
 fooE: {
 type: Object,
 // 當為對象類型設置默認值時必須使用函數(shù)返回
 default: function(){
 return { message: 'Hello, world' }
 }
 },
 // fooF使用一個自定義的驗證器
 fooF: {
 validator: function(value){
 return value>=0 && value<=100;
 }
 }
}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue組件開發(fā)props驗證的實現(xiàn)

推薦度：

點擊下載本文 文檔為doc格式

標簽：驗證 VUE 開發(fā)

熱門焦點

vue組件開發(fā)props驗證的實現(xiàn)

vue組件開發(fā)props驗證的實現(xiàn)

vue組件開發(fā)props驗證的實現(xiàn)

最新推薦

猜你喜歡

熱門推薦