3分钟了解 vue props type类型

最新推荐文章于 2025-06-17 16:52:58 发布

时光机上敲代码

最新推荐文章于 2025-06-17 16:52:58 发布

阅读量1.8w

点赞数 12

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/web_ding/article/details/120655431

vue 专栏收录该内容

19 篇文章

订阅专栏

本文详细探讨了Vue中prop的类型设定，包括String、Number、Boolean、Array、Object等，并讲解了如何使用propType进行类型检查和设置默认值、验证函数。带你掌握Vue组件间数据传递的严谨方式。

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

用了很久的vue，有时候总觉得props type类型，总是有点模棱两可，今天来好好的盘盘他

props介绍：

都知道props是用来父给子传值的（单向的）,HTML 中的 attribute 名是大小写不敏感的，这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

props类型：

props type使用的目的，有点像typescript那种类型检查， type的类型有如下几种，

String
Number
Boolean
Array
Object
Date
Function
Symbol

props的写法：

第一种简单的写法（无默认值）：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise 
}

第二种有默认值的写法：

注意:type 是对象类型的，default 要使用工厂函数获取，例子如下

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }