手把手教你VUE从入门到放弃—— 篇十五（组件参数校验与非props特性）

最新推荐文章于 2025-04-26 16:58:35 发布

我才是真的封不觉

最新推荐文章于 2025-04-26 16:58:35 发布

阅读量181

点赞数

文章标签：组件参数校验非props特性 vue中validator用法

本文链接：https://blog.youkuaiyun.com/JavaCoder_juejue/article/details/103685410

版权

参数校验

示例如下，这里我们给number添加的数据类型约束为字符串型，这里我们用111数字型，明显违反了约束，导致控制台出现警告,如第二张图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <row :number="111"></row>
   </div>
   <script>
       Vue.component('row',{
           props:{
               number:String
           },
           template:'<h2>{{number}}</h2>'
       });
       var app = new Vue({
           el:'#app2'
       });
   </script>
</body>
</html>

我们还可以使用如下约束方式，使用对象或者validator

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <row number="asdasfa"></row>
   </div>
   <script>
       Vue.component('row',{
           props:{
               number:{
                   type:[String,Number],
                   required:false,
                   default:'mmme',
                   validator:function(value){
                       return value.length -5 >=0
                   }
               }
           },
           template:'<h2>{{number}}</h2>'
       });
       var app = new Vue({
           el:'#app2'
       });
   </script>
</body>
</html>

非props特性

也就是父组件使用的属性，不在子组件中的props中定义，也就不能在子组件中使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <row number="asdasfa"></row>
   </div>
   <script>
       Vue.component('row',{
           props:{
               /* number:{
                   type:[String,Number],
                   required:false,
                   default:'mmme',
                   validator:function(value){
                       return value.length -5 >=0
                   }
               } */
           },
           template:'<h2>{{number}}</h2>'
       });
       var app = new Vue({
           el:'#app2'
       });
   </script>
</body>
</html>