vue props接收写法
时间: 2023-09-30 14:05:40 浏览: 36
Vue中的props接收可以通过以下两种写法实现:
1. 对象语法
在组件中,使用props选项来指定props的类型、验证规则和默认值。在父组件中,可以通过v-bind指令来传递props。
组件中的写法:
```
Vue.component('my-component', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
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 }} {{ propB }} {{ propC }} {{ propD }} {{ propE }} {{ propF }}</div>'
})
```
父组件中的写法:
```
<my-component
prop-a="123"
:prop-b="456"
prop-c="789"
:prop-d="1000"
:prop-e="{ message: 'world' }"
:prop-f="20"
></my-component>
```
2. 数组简写语法
在组件中,使用props数组来指定props的名称。在父组件中,可以通过v-bind指令来传递props。
组件中的写法:
```
Vue.component('my-component', {
props: ['propA', 'propB', 'propC'],
template: '<div>{{ propA }} {{ propB }} {{ propC }}</div>'
})
```
父组件中的写法:
```
<my-component
:prop-a="123"
:prop-b="456"
:prop-c="789"
></my-component>
```
无论使用哪种写法,父组件传递的props都会被传递到子组件中,子组件就可以使用它们了。