vue3 props的使用
时间: 2023-11-11 20:56:49 浏览: 37
Vue3中的props是用于从父组件向子组件传递数据的属性。在Vue3中,有几种不同的方式可以定义和使用props。
第一种方式是使用类型标注,这是TypeScript的特性。你可以在`<script setup>`部分使用`defineProps`函数并指定props的类型,例如:
```javascript
<script setup lang="ts">
const props = defineProps<{ cat?: string }>()
</script>
```
或者你也可以使用接口来定义props的类型:
```javascript
interface Animal {
cat?: string
}
const props = defineProps<Animal>()
```
第二种方式是使用camelCase(小驼峰命名法),你可以直接在模板中使用props,例如:
```javascript
defineProps({
getSex: String
})
<template>
{{ getSex }}
</template>
```
第三种方式是使用对象实现props,你可以在`<script setup>`部分直接定义props的对象,例如:
```javascript
<script setup lang="ts">
const props = defineProps({ cat: String })
</script>
```
然后你可以在模板中直接使用props对象中的属性,例如:
```javascript
<template>
{{ cat }}
</template>
```