vue3中defineProps如何使用
时间: 2023-08-10 21:41:47 浏览: 230
Vue中props的使用详解
在 Vue 3 中,可以通过 `defineProps` 来定义组件中的 props 属性。下面是 `defineProps` 的使用方法:
1. 在组件的 `setup` 函数中使用 `defineProps` 定义 props:
```javascript
import { defineComponent, defineProps } from 'vue';
export default defineComponent({
props: {
msg: {
type: String,
required: true
}
},
setup(props) {
// 使用 defineProps 定义 props
const propsData = defineProps({
count: {
type: Number,
default: 0
}
});
return {
props,
propsData
};
}
});
```
2. `defineProps` 的参数是一个对象,每个属性都是一个 prop,包含 prop 的类型、默认值等信息。
3. 在组件中使用 `props` 和 `propsData` 对象来访问 props 属性:
```html
<template>
<div>
<p>{{ props.msg }}</p>
<p>{{ propsData.count }}</p>
</div>
</template>
```
注意:在 Vue 3 中,组件的 props 不再是响应式的,如果需要响应式的 props,可以使用 `reactive` 函数来包装 props 对象。
阅读全文