vue组件props不同数据类型传参的默认值

vue prop 会接收不同的数据类型,这里列出了 常用的数据类型的设置默认值的写法,其中包含: Number, String, Boolean, Array, Object , Function

//数值型
num: {
	type: Number,
	default: 0
},
//字符串
name: {
	type: String,
	default: ''
},
//布尔值
dataLoading: {
	type: Boolean,
	default: false
},
//数组
list: {
	type: Array,
	default: () => {
		return []
	}
},
//对象
obj: {
	type: Object,
	default: () => ({})
},
//方法
getParams: {
	type: Function,
	default: () => () => {}
}
### Vue3 中传递具有固定类型的参数 在 Vue3 中,为了确保组件接收到的 `props` 参数具备固定的类型,可以利用 TypeScript 或者 JavaScript 的类型声明功能来增强开发体验和代码健壮性。 #### 使用 TypeScript 定义 Props 类型 当项目基于 Vue3 和 TypeScript 构建时,推荐使用接口或类型别名定义 `props` 接收数据的具体结构与类型。这不仅有助于编译期错误检测,还能提供更好的 IDE 支持[^3]。 ```typescript // ParentComponent.vue <template> <ChildComponent :message="greetingMessage" /> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default defineComponent({ components: { ChildComponent, }, setup() { const greetingMessage = ref<string>('Hello!'); return { greetingMessage, }; } }); </script> ``` ```typescript // ChildComponent.vue <script lang="ts"> import { defineComponent, PropType } from 'vue'; interface MessageProps { message: string; } export default defineComponent({ props: { message: { type: String as PropType<MessageProps['message']>, required: true, }, }, setup(props) { console.log(`Received message is ${props.message}`); }, }); </script> ``` 上述例子展示了如何通过 TypeScript 明确指定 `props` 的类型为字符串,并且将其标记为必填项。这种方式能够有效防止运行时由于类型不匹配引发的问题[^4]。 #### 不使用 TypeScript 的情况下设置 Props 类型 即使不在整个应用中引入 TypeScript,在纯 JavaScript 开发环境下也可以借助 Vue 提供的方式对 `props` 进行基本的类型约束: ```javascript // CounterCom.js export default { name: "CounterCom", props: { num: { type: Number, // 设置 prop 类型为数字 default: 1, // 默认值设定 }, }, }; ``` 此段代码片段说明了即便是在没有 TypeScript 的环境中也能通过对 `props` 属性配置对象内的 `type` 字段来进行简单的类型验证。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值