vue组件中props类型及默认值

Misnice

已于 2024-03-26 16:44:28 修改

阅读量2.3w

点赞数 14

CC 4.0 BY-SA版权

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

于 2021-12-26 16:57:29 首次发布

本文链接：https://blog.youkuaiyun.com/Misnice/article/details/122157348

Vue 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了如何在Vue组件中定义并验证props，包括基本类型、默认值、自定义验证函数等，确保组件使用的正确性和一致性。这对于开发可复用的Vue组件至关重要，可以有效防止因传入不合法参数导致的错误，并提供友好的开发提示。

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

简单写法

props: {
  fieldString: String,
  fieldNumber: Number,
  fieldBoolean: Boolean,
  fieldArray: Array,
  fieldObject: Object,
  fieldFunction: Function
}

带有默认值写法

  props: {
    fieldString: {
      type: String,
      default: ''
    },
    fieldNumber: {
      type: Number,
      default: 0
    },
    fieldBoolean: {
      type: Boolean,
      default: true
    },
    fieldArray: {
      type: Array,
      default: () => []
    },
    fieldObject: {
      type: Object,
      default: () => ({})
    },
    fieldFunction: {
      type: Function,
      default: function () { }
    }
  }

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

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
     }
   }
 }