defineProps<{...}>():defineProps 函数用于定义组件的属性(props),通过传入一个类型定义对象来指定属性的名称和类型。在这个例子中,defineProps 定义了一个包含多个属性的类型定义对象。
时间: 2024-10-14 07:03:21 浏览: 19
Vue.js 2.x之组件的定义和注册图文详解
`defineProps` 是 Vue.js 中的一个功能,它是一个静态方法,通常在组件的 `setup()` 函数中使用,作用类似于 TypeScript 或者 Flow 的类型注解,帮助开发者明确组件期望接收哪些 props。这个函数接收一个对象作为参数,对象的键是 prop 的名称,值是该 prop 的预期类型。例如:
```javascript
import { defineComponent, defineProps } from 'vue';
const Props = defineProps<{
name: String; // 声明 name 属性为字符串类型
age: Number; // 声明 age 属性为数字类型
isActive: Boolean; // 声明 isActive 属性为布尔类型
}>
export default defineComponent({
setup(props) {
// 在这里可以对 props 进行检查和处理
console.log('props:', props);
return {};
}
});
```
使用 `defineProps` 可以提升代码的可读性和健壮性,防止在运行时因传入错误类型的值而引发错误。
阅读全文