首页v3+ts使用withDefaults接收数组

v3+ts使用withDefaults接收数组

时间: 2025-05-24 17:04:25 浏览: 21

在 Vue 3 和 TypeScript 的组合环境中，`withDefaults` 是一个非常实用的工具函数，用于设置组件 props 的默认值。当需要处理数组类型的 prop 并为其提供默认值时，可以通过以下方式实现。 ### 使用 `withDefaults` 处理数组类型 Prop 以下是具体的代码示例： ```typescript <script lang="ts"> import { defineComponent, withDefaults } from 'vue'; export interface Props { items?: string[]; } // 定义带有默认值的Props const MyComponent = defineComponent({ props: withDefaults(defineProps<Props>(), { items: () => ['defaultItem1', 'defaultItem2'] as string[] }), setup(props) { return () => ( <ul> {props.items.map((item) => ( <li>{item}</li> ))} </ul> ); } }); export default MyComponent; </script> ``` #### 解析 - **接口定义**: 首先通过 `interface Props` 明确声明 `items` 属性是一个可选的字符串数组[^1]。 - **默认值设定**: 利用 `withDefaults` 函数为 `items` 提供了一个返回数组的工厂函数，默认值被设为包含两个字符串项的数组[^2]。 - **渲染逻辑**: 在模板部分遍历 `props.items` 数组并将其每一项显示在一个 `<li>` 中[^3]。此方法不仅使开发者能够轻松指定复杂数据结构（如数组）的默认行为，还充分利用了TypeScript强大的静态类型检查功能来减少运行时错误的发生概率[^4]。 ### 注意事项如果尝试直接将固定数组作为默认参数传递，则可能导致多个实例共享同一个引用对象的问题。因此推荐采用箭头函数形式创建独立的新数组实例以规避此类风险[^5]。

阅读全文