Vue_组件参数校验与非Props特性

最新推荐文章于 2024-11-11 16:32:44 发布

_dalianmiao

最新推荐文章于 2024-11-11 16:32:44 发布

阅读量584

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue_学习笔记

本文链接：https://blog.youkuaiyun.com/hani_wen/article/details/80804017

Vue_学习笔记专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了Vue.js中子组件如何使用Props从父组件接收参数，并进行类型检查与验证。包括基本的类型定义、必填项设置及默认值提供等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.props
子组件接收父组件的参数的时候，props注册接收的参数

props:['count']

子组件可以对接收的参数校验。
例如规定接收的count参数要求是String

props:{
 count:String
}

如果count是别的类型就会报错
这里写图片描述
当然也可以设置多种数据类型

props:{
  count:[String,Number]
}

也可以是很复杂的定义：

props:{
  count:{
    type:Number,
    required:true,
}
}

required:true, 这个属性为true时，count是必传的，不传就会报错
这里写图片描述
required:false, 这个属性为false时，count不是必传的，不传也不会报错，这时你可以用default来显示没有传递的时count的默认值
也可以通过validator来规定长度之类的。

 props:{
    count:{
        type:String,
        required:false,
        default:"6666" ,
        validator:function(value){
             return (value.length > 5)
        }
    }
   },

二.非Props特性

子组件没有声明props，为非Props特性

①非Props特性不能在子组件中调用父组件传过来的数据

②会显示子组件最外层的DOM标签的属性