vue3中props
时间: 2023-09-13 10:08:38 浏览: 46
在Vue 3中,props是用于接收父组件传递的数据的一种方式。与Vue 2相比,Vue 3中的props有一些变化。
在Vue 3中,props可以通过两种方式定义:Options API 和 Composition API。
在Options API中,我们可以在组件的选项中定义props属性,如下所示:
```javascript
export default {
props: {
propA: {
type: String,
required: true
},
propB: {
type: Number,
default: 100
}
},
// ...
}
```
propA是一个必需的字符串类型的prop,而propB是一个可选的数字类型的prop,如果父组件没有传递propB,则会使用默认值100。
在Composition API中,我们可以使用`defineProps()`函数来定义props,如下所示:
```javascript
import { defineProps } from 'vue';
export default {
setup(props) {
defineProps({
propA: {
type: String,
required: true
},
propB: {
type: Number,
default: 100
}
});
// ...
}
}
```
在Composition API中,我们通过`setup()`函数来定义props,并使用`defineProps()`函数来定义具体的prop属性。
无论是Options API还是Composition API,我们都可以通过`props`对象来访问传递的props值。例如,在模板中使用`props.propA`即可访问propA的值。