vue3props如何使用
时间: 2023-05-26 10:05:05 浏览: 66
Vue3中的props可以在组件中接收从父组件中传递下来的数据,使用如下:
1. 在组件中声明props:
```
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyComponent',
props: {
propA: String,
propB: {
type: Number,
default: 100
}
},
...
})
</script>
```
2. 在父组件中传递props:
```
<MyComponent propA="hello" propB="200" />
```
3. 在子组件中使用props:
```
<template>
<div>
<p>Prop A: {{ propA }}</p>
<p>Prop B: {{ propB }}</p>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyComponent',
props: {
propA: String,
propB: {
type: Number,
default: 100
}
},
...
})
</script>
```
这样,在子组件中就可以通过`this.propA`和`this.propB`来访问传递进来的数据。同时,props也支持类型校验、默认值、必填等属性,更多使用方法可以查看Vue3官方文档。