vue组件中props类型及默认值

简单写法

1 props: {
2   fieldString: String,
3   fieldNumber: Number,
4   fieldBoolean: Boolean,
5   fieldArray: Array,
6   fieldObject: Object,
7   fieldFunction: Function
8 }

带有默认值写法

 1 props: {
 2     fieldString: {
 3       type: String,
 4       default: ''
 5     },
 6     fieldNumber: {
 7       type: Number,
 8       default: 0
 9     },
10     fieldBoolean: {
11       type: Boolean,
12       default: true
13     },
14     fieldArray: {
15       type: Array,
16       default: () => []
17     },
18     fieldObject: {
19       type: Object,
20       default: () => ({})
21     },
22     fieldFunction: {
23       type: Function,
24       default: function () { }
25     }
26   }

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

 1 props: {
 2    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
 3    propA: Number,
 4    // 多个可能的类型
 5    propB: [String, Number],
 6    // 必填的字符串
 7    propC: {
 8      type: String,
 9      required: true
10    },
11    // 带有默认值的数字
12    propD: {
13      type: Number,
14      default: 100
15    },
16    // 带有默认值的对象
17    propE: {
18      type: Object,
19      // 对象或数组默认值必须从一个工厂函数获取
20      default: function () {
21        return { message: 'hello' }
22      }
23    },
24    // 自定义验证函数
25    propF: {
26      validator: function (value) {
27        // 这个值必须匹配下列字符串中的一个
28        return ['success', 'warning', 'danger'].indexOf(value) !== -1
29      }
30    }
31  }

 

posted @ 2022-11-16 09:48  木章  阅读(2061)  评论(0)    收藏  举报