2. 程式人生 > >vue 元件開發 props 驗證

vue 元件開發 props 驗證

阿新 • • 發佈：2019-02-04

使用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可以略寫：

複製程式碼

 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: {
18             fooMessage: Number
19         },
20         template: '<div> {{ fooMessage }} </div>'
21     };
22  
23     var vm = new Vue({
24         components: {
25             'foo-component': fooComponent
26         },
27         el: '#app',
28         data: {
29             fooMessage: 123
30         }
31     });
32  
33 </script>
34 </body>
35 </html>

複製程式碼

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

type接受多個型別

當引數可以是多種型別的其中一個的時候，使用陣列來表示。

複製程式碼

 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: {
18             fooMessage: [Number, String]
19         },
20         template: '<div> {{ fooMessage }} </div>'
21     };
22  
23     var vm = new Vue({
24         components: {
25             'foo-component': fooComponent
26         },
27         el: '#app',
28         data: {
29             fooMessage: 123
30         }
31     });
32  
33 </script>
34 </body>
35 </html>
36

複製程式碼

type能夠指定的型別

type可以是以下原生型別：

String

Number

Boolean

Function

Object

Array

Symbol

required

可以使用required選項來宣告這個引數是否必須傳入。

複製程式碼

 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: {
18             fooMessage: {
19                 type: Number,
20                 required: true
21             }
22         },
23         template: '<div> {{ fooMessage }} </div>'
24     };
25  
26     var vm = new Vue({
27         components: {
28             'foo-component': fooComponent
29         },
30         el: '#app',
31         data: {
32             fooMessage: 256
33         }
34     });
35  
36 </script>
37 </body>
38 </html>

複製程式碼

當未傳入引數時：

default

使用default選項來指定當父元件未傳入引數時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-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: {
18             fooMessage: {
19                 type: Number,
20                 default: 128
21             }
22         },
23         template: '<div> {{ fooMessage }} </div>'
24     };
25  
26     var vm = new Vue({
27         components: {
28             'foo-component': fooComponent
29         },
30         el: '#app',
31         data: {
32             fooMessage: 256
33         }
34     });
35  
36 </script>
37 </body>
38 </html>

複製程式碼

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

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

複製程式碼

 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-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: {
18             fooMessage: {
19                 type: Array,
20                 default: function(){
21                     return ['foo', 'bar'];
22                 }
23             }
24         },
25         template: '<div> {{ fooMessage }} </div>'
26     };
27  
28     var vm = new Vue({
29         components: {
30             'foo-component': fooComponent
31         },
32         el: '#app',
33         data: {
34             fooMessage: ['f', 'o', 'o']
35         }
36     });
37  
38 </script>
39 </body>
40 </html>

複製程式碼

required && default ???

那麼required和default是否能同時出現在一個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-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: {
18             fooMessage: {
19                 type: Number,
20                 required: true,
21                 default: 128
22             }
23         },
24         template: '<div> {{ fooMessage }} </div>'
25     };
26  
27     var vm = new Vue({
28         components: {
29             'foo-component': fooComponent
30         },
31         el: '#app',
32         data: {
33             fooMessage: 256
34         }
35     });
36  
37 </script>
38 </body>
39 </html>

複製程式碼

渲染結果：

儘管控制檯上Vue報了錯誤，但是props變數fooMessage還是使用了設定的default值。

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

複製程式碼

 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: {
18             fooMessage: {
19                 type: Number
20             }
21         },
22         template: '<div> {{ fooMessage }} </div>'
23     };
24  
25     var vm = new Vue({
26         components: {
27             'foo-component': fooComponent
28         },
29         el: '#app',
30         data: {
31             fooMessage: 'foobar'
32         }
33     });
34  
35 </script>
36 </body>
37 </html>

複製程式碼

渲染結果：

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

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

validator

當校驗規則很複雜，預設提供的校驗規則無法滿足的時候可以使用自定義函式來校驗。

複製程式碼

 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: {
18             fooMessage: {
19                 validator: function(value){
20                     return value>=0 && value<=128;
21                 }
22             }
23         },
24         template: '<div> {{ fooMessage }} </div>'
25     };
26  
27     var vm = new Vue({
28         components: {
29             'foo-component': fooComponent
30         },
31         el: '#app',
32         data: {
33             fooMessage: 100
34         }
35     });
36  
37 </script>
38 </body>
39 </html>

複製程式碼

一個綜合的例子

複製程式碼

 1 props: {
 2     // fooA只接受數值型別的引數
 3     fooA: Number,
 4     // fooB可以接受字串和數值型別的引數
 5     fooB: [String, Number],
 6     // fooC可以接受字串型別的引數，並且這個引數必須傳入
 7     fooC: {
 8         type: String,
 9         required: true
10     },
11     // fooD接受數值型別的引數，如果不傳入的話預設就是100
12     fooD: {
13         type: Number,
14         default: 100
15     },
16     // fooE接受物件型別的引數
17     fooE: {
18         type: Object,
19         // 當為物件型別設定預設值時必須使用函式返回
20         default: function(){
21             return { message: 'Hello, world' }
22         }
23     },
24     // fooF使用一個自定義的驗證器
25     fooF: {
26         validator: function(value){
27             return value>=0 && value<=100;
28         }
29     }
30 }

相關推薦

vue 元件開發 props 驗證

使用props 在Vue中父元件向子元件中傳送資料是通過props實現的，一個簡單的使用props的例子： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset

vue元件開發之導航選單元件封裝

執行結果： 呼叫程式碼部分： <template> <div id="app"> <menu-bar :list="list" @click="menuClick"></menu-bar> <!--fir

【VUE元件開發】VUE隨意點選列表元素切換選中樣式，並有序陣列新增索引和數值

直接檢視程式碼以及樣式 <template> <div> <!--頂部step--> <div class="dataStep"> <!--<img src="static

【轉存】Vue元件選項props

原帖地址   前面的話 　　元件接受的選項大部分與Vue例項一樣，而選項props是元件中非常重要的一個選項。在 Vue 中，父子元件的關係可以總結為 props down, events up。父元件通過 props 向下傳遞資料給子元件，子元件通過 

Vue- 元件與props屬性的用法

在 Vue 裡，一個元件實質上是一個擁有預定義選項的一個 Vue 例項：(單獨測試的時候記得new Vue()渲染) // Define a new component called todo-itemVue.component('todo-item', { temp

vue元件開發之圖片上傳本地預覽元件

最近專案一直在使用vue，以前只是用vue做過一些簡單的demo對資料進行增刪改，並沒有用於實際開發專案，。今天就想了一下如何用vue實現常見的圖片上傳前本地預覽效果。 效果預覽： <template> <div class

vue元件開發之tab切換元件

<template> <div class="tab-slider"> <div class="tab"> <

webstorm+vue元件開發準備

Vue使用一、準備工具webstorm 、 nodejs 、vue配置二、webstorm建立一個空專案三、進入 dos cmd 命令輸入，切換到專案目錄下，安裝依賴1. npm init or npm init -y ，會多出一個檔案  2. npm install web

Vue 元件引數校驗與非 props 特性

元件的引數校驗：父元件通過屬性傳遞給子元件資料，子元件有權對這些資料進行約束，這就是引數校驗。 如下，簡單的引數校驗。 <div id="root"> <child content="hello world"></child> <!-- 下

Vue元件通訊之一props

元件間通訊是元件開發時非常重要的一個環節，Vue在元件鍵通訊提供了直接訪問元件例項的方法，同時也提供了自定義事件機制，通過廣播、委派、監聽等形式跨元件的函式呼叫。 在元件的例項中，Vue提供了三個屬性對其父子元件以及根例項進行直接訪問： （1）$parent：父元件例項； （2）$chi

vue元件化開發（底部導航蘭）

父子元件關鍵聯絡  一.建立父元件parent.vue <template> <div> <h1>父元件的內容</h1> </div> </template> 然後再router 下的ind

Vue.js的複用元件開發流程

本文由蔡述雄發表 接下來我們會詳細分析下如何完成由多個元件組成一個複用元件的開發流程。 下面先看看我們的需求 列表元件quiList.vue 本節我們主要要完成這樣一個列表功能，每一行的列表是一個元件，列表內可能出現按鈕元件或者箭頭元件，點選按鈕元件可以自定義事件，同時可以根據不同的引數來決

Vue元件： 自定義元件props傳遞資料

一、new一個Vue 二、Vue中使用自定義元件需要先註冊元件 註冊元件（其實就是定義元件）：可以註冊全域性元件，也可以註冊區域性元件。 三、btn是傳引數的，在使用組建的時候可以傳入不同的引數。 <body> <div id="app

vue 父元件非同步獲取資料與子元件通訊props資料不通；

父元件非同步獲取資料時，通過props向子元件傳遞資料時資料不通。 原因可能是父元件在非同步獲取資料時使用了箭頭函式， 例： //父元件 export default{ data(){ return {

vue 子元件修改props中的值

問題：子元件想修改父元件傳來的值（props中的值）。普通的修改會報錯，因為這個值是單向的，只能傳進來，要是想修改就要用v-model 解決辦法：用v-model 寫個簡單粗暴例子： 父元件 <control :lingthData="lingthData" v-model=

Vue元件化(全域性、區域性)、props傳參

目錄 全域性元件化 區域性元件化 全域性元件化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Do

vue元件從開發到釋出

元件化是前端開發非常重要的一部分，從業務中解耦出來，可以提高專案的程式碼複用率。更重要的是我們還可以打包釋出，俗話說集體的力量是偉大的，正因為有許許多多的開源貢獻者，才有了現在的世界。 不想造輪子的工程師，當不了合格的搬運工 。讓我們來了解一下vue元件從開發

vue學習進階：元件入門練習到使用vue-cli開發

新建index.html，直接複製以下程式碼，雙擊瀏覽器執行即可。程式碼包含Vue的元件使用，可對照練習。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

Vue元件化開發（第四天（2.元件））

Vue 元件化開發 為了好維護管理和程式碼的複用，提高開發效率便於協同開發 分類 頁面級元件： 一個頁面是一個元件 將可複用的部分抽離出來 一個自定義標籤Vue就會把他看成一個嘴賤 div p span a header …可以給這些標籤賦予一定的意義

優雅的使用vue父元件通過props向子元件傳遞

在Vue 中,可以使用 props 向子元件傳遞資料，下面這篇文章主要給大家介紹了關於vue父元件通過props如何向子元件傳遞方法的相關資料，文中通過示例程式碼介紹的非常詳細，需要的朋友可以參考借鑑，下面來一起看看吧。 vue 元件中的 this vue