验证属性

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们定义的 ui-button 这个组件里的 props 的值,现在是一个数组,我们可以把它换成一个对象 .. 这样你可以为每个属性去添加一些验证 ...

先在这个对象里添加一个 text 属性,它的值又是一个对象 ... 然后添加一个 type 属性,设置一下这个 text 属性的值的类型,String 表示字符串,Number 是数字,Boolean 是布尔值,Function 是函数,Object 是对象,Array 是数组 .. 这里把它设置成 String ..

然后再添加一个 default,可以设置一下这个属性的默认的值 ... 如果 text 的值是一个对象或者数组的话,这个 default 应该是一个函数,在函数的内部你可以返回对象或者数组的值 .. 这里我们先用一个字符串 .. 让它等于 button ..

找到一个使用了这个组件的地方,去掉它上面的 text,你会发现,这个按钮上显示的就是我们给 text 设置的默认的值 ..

如果你希望属性是必须的,可以添加一个 required,把它设置成 true .. 这样在使用这个组件的时候不指定这个属性的值,就会在控制台上出现提示 ...

Missing require prop .. 再给这个组件添加一个 text 属性 .. 设置一个值 ... 这样缺少必填属性的错误就不见了 ...

如果想自定义一个验证器,可以在这个属性的对象里添加一个 validator 方法 ... 添加一个 value 参数,return 一下 .. 看看 value 的 length 属性的值是不是大于 3 ... 也就是现在 text 属性的值的字符长度要大于 3 ..

现在控制台上会出现一个错误,custom validator check failed ... 自定义验证器检查出一个错误来 ... 因为现在中间这个按钮的 text 属性的长度小于 3 .. 修改一下这个按钮上的 text 属性的值 .. 这样刚才我们在控制台上看到的错误就不见了 ..

验证属性《 Vue.js:组件 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点