vue組件開(kāi)發(fā)props驗(yàn)證的實(shí)現(xiàn)

更新時(shí)間：2019年02月12日 10:06:14 作者：安慕希

這篇文章主要介紹了vue組件開(kāi)發(fā)props驗(yàn)證的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

使用props

在Vue中父組件向子組件中傳送數(shù)據(jù)是通過(guò)props實(shí)現(xiàn)的，一個(gè)簡(jiǎ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驗(yàn)證

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

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

type

可以使用type來(lái)聲明這個(gè)參數(shù)可以接受的數(shù)據(jù)的類(lèi)型，當(dāng)檢查規(guī)則只有一個(gè)的時(shí)候type可以略寫(xiě)：

<!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ù)類(lèi)型不正確的時(shí)候Vue會(huì)發(fā)出提示：

type接受多個(gè)類(lèi)型

當(dāng)參數(shù)可以是多種類(lèi)型的其中一個(gè)的時(shí)候，使用數(shù)組來(lái)表示。

<!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能夠指定的類(lèi)型

type可以是以下原生類(lèi)型：

String
Number
Boolean
Function
Object
Array
Symbol

required

可以使用required選項(xiàng)來(lái)聲明這個(gè)參數(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ù)時(shí)：

default

使用default選項(xiàng)來(lái)指定當(dāng)父組件未傳入?yún)?shù)時(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ù)時(shí)子組件的值是128，當(dāng)父組件傳入?yún)?shù)時(shí)是其指定的參數(shù)，比如這里可以是256。

當(dāng)type的類(lèi)型為Array或者Object的時(shí)候default必須是一個(gè)函數(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是否能同時(shí)出現(xiàn)在一個(gè)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é)果：

盡管控制臺(tái)上Vue報(bào)了錯(cuò)誤，但是props變量fooMessage還是使用了設(shè)置的default值。

事情不會(huì)這么簡(jiǎn)單，再測(cè)試一下其它的情況，比如當(dāng)傳入的參數(shù)驗(yà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: {
        type: Number
      }
    },
    template: '<div> {{ fooMessage }} </div>'
  };
 
  var vm = new Vue({
    components: {
      'foo-component': fooComponent
    },
    el: '#app',
    data: {
      fooMessage: 'foobar'
    }
  });
 
</script>
</body>
</html>

渲染結(jié)果：

fooMessage要求的類(lèi)型是Number，傳入了一個(gè)String類(lèi)型的，盡管在控制臺(tái)提示報(bào)了錯(cuò)，但是仍然將其渲染了出來(lái)。

由此可以得出一個(gè)結(jié)論：Vue的props校驗(yàn)只是提供一個(gè)參考，并不是強(qiáng)制性的。

validator

當(dāng)校驗(yàn)規(guī)則很復(fù)雜，默認(rèn)提供的校驗(yàn)規(guī)則無(wú)法滿(mǎn)足的時(shí)候可以使用自定義函數(shù)來(lái)校驗(yàn)。

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

一個(gè)綜合的例子

props: {
  // fooA只接受數(shù)值類(lèi)型的參數(shù)
  fooA: Number,
  // fooB可以接受字符串和數(shù)值類(lèi)型的參數(shù)
  fooB: [String, Number],
  // fooC可以接受字符串類(lèi)型的參數(shù)，并且這個(gè)參數(shù)必須傳入
  fooC: {
    type: String,
    required: true
  },
  // fooD接受數(shù)值類(lèi)型的參數(shù)，如果不傳入的話(huà)默認(rèn)就是100
  fooD: {
    type: Number,
    default: 100
  },
  // fooE接受對(duì)象類(lèi)型的參數(shù)
  fooE: {
    type: Object,
    // 當(dāng)為對(duì)象類(lèi)型設(shè)置默認(rèn)值時(shí)必須使用函數(shù)返回
    default: function(){
      return { message: 'Hello, world' }
    }
  },
  // fooF使用一個(gè)自定義的驗(yàn)證器
  fooF: {
    validator: function(value){
      return value>=0 && value<=100;
    }
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: