vue中props接收写法
时间: 2023-10-17 21:13:33 浏览: 96
在组件中使用props接收的写法如下:
```javascript
Vue.component('my-component', {
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 value > 10
}
}
},
template: '<div>{{ propA }}</div>'
})
```
在父组件中传递props的写法如下:
```html
<my-component prop-a="1" prop-b="2" prop-c="hello"></my-component>
```
阅读全文