vue组件开发props验证的实现

2024-05-06 15:42:32

字体：大中小

来源：转载

供稿：网友

使用props

在Vue中父组件向子组件中传送数据是通过props实现的，一个简单的使用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组件的时候，他可能对于其要接受的参数有什么要求并不是很清楚，因此传入的参数可能会在开发子组件的人的意料之外，程序就会发生错误，就像我们在函数调用之前先检查一下函数一样，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">    <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会发出提示：

上一篇：JavaScript常用工具方法封装

下一篇：Vue 组件参数校验与非props特性的方法