碼上歡樂
相關內容    簡體    繁體

vue 組件開發 props 驗證

本文轉載自   查看原文   2019-10-11 13:50   1759    props數據驗證/ vue

使用props

在Vue中父組件向子組件中傳送數據是通過props實現的，一個簡單的使用props的例子：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Vue Study</title>
 6 </head>
 7 <body>
 8  
 9     <div id="app">
10         <foo-component :foo-message="fooMessage"></foo-component>  
11     </div>
12  
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15  
16     var fooComponent = {
17         props: ['fooMessage'],
18         template: '<div> {{ fooMessage }} </div>'
19     };
20  
21     var vm = new Vue({
22         components: {
23             'foo-component': fooComponent
24         },
25         el: '#app',
26         data: {
27             fooMessage: 123
28         }
29     });
30  
31 </script>
32 </body>
33 </html>

為什么要有props驗證

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

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

type

可以使用type來聲明這個參數可以接受的數據的類型，當檢查規則只有一個的時候type可以略寫：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>
 
    <div id="app">
        <input type="text" v-model="fooMessage" placeholder="請輸入...">
        <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>

當傳入的參數類型不正確的時候Vue會發出提示：

type接受多個類型

當參數可以是多種類型的其中一個的時候，使用數組來表示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>
 
    <div id="app">
        <input type="text" v-model.number="parentInput" placeholder="請輸入...">
        <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選項來聲明這個參數是否必須傳入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>
 
    <div id="app">
        <input type="text" v-model="fooMessage" placeholder="請輸入...">
        <foo-component :foo-message="fooMessage"></foo-component> 
　　　　　<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
            }
        },
        template: '<div> {{ fooMessage }} </div>'
    };
 
    var vm = new Vue({
        components: {
            'foo-component': fooComponent
        },
        el: '#app',
        data: {
            fooMessage: 256
        }
    });
 
</script>
</body>
</html>

當未傳入參數時：

default

使用default選項來指定當父組件未傳入參數時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>

當父組件未傳入參數時子組件的值是128，當父組件傳入參數時是其指定的參數，比如這里可以是256。

當type的類型為Array或者Object的時候default必須是一個函數：

<!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: 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是否能同時出現在一個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>

渲染結果：

盡管控制台上Vue報了錯誤，但是props變量fooMessage還是使用了設置的default值。

事情不會這么簡單，再測試一下其它的情況，比如當傳入的參數驗證不通過的時候：

<!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>

渲染結果：

fooMessage要求的類型是Number，傳入了一個String類型的，盡管在控制台提示報了錯，但是仍然將其渲染了出來。

由此可以得出一個結論：Vue的props校驗只是提供一個參考，並不是強制性的。

validator

當校驗規則很復雜，默認提供的校驗規則無法滿足的時候可以使用自定義函數來校驗。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>
 
    <div id="app">
        <input type="text" v-model.number="fooMessage" placeholder="請輸入...">
        <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>

一個組合的例子：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=” utf-8” > 
    <title>數據驗證</title>
    <script src="../../vue.js" type="text/javascript"></script>
</head> 
<body>
    <div id="app" v-cloak>
        當props需要驗證時，就需要對象寫法。一般當你的組件提供給別人使用時推薦進行數據驗證，以下時幾個prop例子：
        <br>
        <!-- <input type="text" v-model.number="parentInput" placeholder="請輸入..."> -->
        <my-component :prop-a="parentInput" :prop-d="parentInput" :prop-f="parentInput"></my-component>
    </div>    
<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:{
                validator:function(value){
                    return value>10;
                }
            }
        },
        template:'<div>{{propA}},{{propD}},{{propF}}</div>'
    });

    var app=new Vue({
        el:'#app',
        data:{
            parentInput:16
        }
    })
</script> 
</body> 
</html>

部分摘自：https://www.cnblogs.com/exhuasted/p/7250452.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue的父子組件間的相互傳參props及props數據的多種驗證機制 Vue組件選項props Vue 父子組件傳值 props vue向路由組件傳遞props vue3 組件傳值之 props 與 attrs 的區別 通過props設置vue子組件的顯示與隱藏 怎樣在 Vue 的 component 組件中使用 props ? Vue 組件 Props 類型及默認值 Vue Router：使用 props 將組件和路由解耦 Vue系列： 如何通過組件的屬性props設置樣式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM