Vue props传递的类型和写法

最新推荐文章于 2025-03-24 19:57:42 发布

D_jing20

最新推荐文章于 2025-03-24 19:57:42 发布

阅读量3k

点赞数

分类专栏： VUE 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/u012320487/article/details/121222726

版权

VUE 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了Vue中props的使用，包括类型检查、默认值、必填项及自定义验证。props允许父组件向子组件传递数据，类型包括String、Number、Boolean等。通过default关键字设定默认值，required标记必填，validator函数实现自定义验证。理解并掌握这些props属性对于优化Vue组件设计至关重要。

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

1、props常用属性

类型检查（规定数据类型）	type	String 字符串
		Number 数字
		Boolean 布尔
		Array 数组
		Object 对象
		Date 日期
		Function 函数
		Symbol 独一无二的值(es6)
默认值	default	default : (默认值)，基础数据类型: 直接赋值，对象数据类型: 用函数赋值 ()=>[]
必填项	required	required: (必填项) ，默认为false,说明父级必须传入,否则会报错
校验	validator	验证传入的值是否符合规定

2、props语法

props: {
    prop1: [Boolean, Number], // 多个类型
    prop2: {
      type: Number, // 数字
      default: 100 // 默认值
    },
    prop3: {
      type: Boolean, // 布尔
      required: true // 必填
    },
    prop4: {
      type: String, // 字符串
      required: true
    },
    prop5: {
      type: Array, // 数组 // 对象或数组默认值必须从一个工厂函数获取
      default: () => []
    },
    prop6: {
      type: Object, // 对象 // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { msg: 'hello' }
      }
    },
    prop7: {
      type: String,
      validator: function (t) { // 自定义验证函数
        return t === 'fade' || t === 'slide' // 这个值必须匹配下列字符串中的一个
      },
      defalut:'slide'
    }
  }