defineProps 属性设置接口类型
时间: 2023-12-21 09:30:44 浏览: 130
Vue props中Object和Array设置默认值操作
根据提供的引用内容,可以了解到Vue 3中新增了defineProps函数,用于设置props的类型和默认值。下面是一个使用defineProps设置接口类型的例子:
```javascript
import { defineComponent, defineProps } from 'vue'
const props = defineProps({
name: {
type: String,
required: true
},
age: {
type: Number,
default: 18
},
sex: {
type: String,
default: '男'
}
})
export default defineComponent({
props,
setup(props) {
// ...
}
})
```
在上面的例子中,我们使用defineProps函数定义了一个props对象,其中包含了三个属性:name、age和sex。每个属性都有一个type属性,用于指定属性的类型,可以是String、Number、Boolean、Object、Array、Function、Symbol、Date、RegExp、Promise、Map、Set、WeakMap、WeakSet、ArrayBuffer、DataView、Int8Array、Uint8Array、Uint8ClampedArray、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array、BigInt、BigInt64Array、BigUint64Array中的一种或多种。此外,我们还可以使用required属性指定属性是否必须,使用default属性指定属性的默认值。
在组件中,我们可以使用props选项将props对象传递给组件,然后在setup函数中使用props对象访问属性的值。
阅读全文