vue3 中使用 props, emits 并指定其类型与默认值(vuejs props)

发布时间：2024-01-13

vue3 中使用 props, emits 并指定其类型与默认值前言

推荐整理分享vue3 中使用 props, emits 并指定其类型与默认值(vuejs props)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3中使用props,vue3 中使用draggable - web前端,vue3 中使用rsa,vue3中使用props,vue的props用法,vue3 中使用rsa,vue3中使用props,vue3 中使用draggable - web前端,内容如对您有帮助，希望把文章链接给更多的朋友！

本文主要描述 vue3 中 defineProps 与 defineEmits 分别在 JS 环境和 TS 环境中的使用方法。

defineProps 的使用

defineProps在使用的时候无需引入，默认是全局方法。

在 js 开发的 vue3 项目中使用const props = defineProps({ attr1: { type: String, // S 必须大写 default: "", }, attr2: Boolean, attr3: { type: Number, required: true, },});

js 环境中使用与 vue2 的使用方法类似，只是选项式 API 换成了组合式 API。定义 props 类型与默认值都与 vue2 类型，vue3 中使用的是definePropsAPI，在此不多介绍。

在 ts 开发的 vue3 项目中使用interface DeatilInf { aaa: string; bbb: number;}const props = withDefaults( // 参数一：定义props类型：? 代表非必传字段， :号后面紧跟的是数据类型或自定义接口， | 或多种类型 defineProps<{ name: string; age?: number; detail?: DeatilInf | any; }>(), // 参数二：指定非必传字段的默认值 { age: 18, detail: {}, }); vue3 中使用 props, emits 并指定其类型与默认值(vuejs props)

vue3 中使用 props, emits 并指定其类型与默认值(vuejs props)

使用 typeScript 开发 vue3 项目定义 props 主要使用的 API 有两个： defineProps 定义接收的 props 、withDefaults 定义接收的类型。

当然，你也可以使用上述 js 环境使用的方法定义 props，但这样做就失去了使用 TS 的意义了。

defineEmits 的使用

与 vue2 不同：vue3 在触发事件之前需要定义事件。同样在 vue3 中 defineEmits 也是全局 API

js 中使用const emits = defineEmits(["change", "input"]);emits("chage", "data");emits("input", { data: 123 });TS 中使用enum EventName { CHANGE = "change", INPUT = "input",}const emits = defineEmits<{ (event: EventName.CHANGE, data: string[]): void; (event: EventName.INPUT, data: string): void;}>();emits(EventName.CHANGE, ["data"]);emits(EventName.INPUT, "123");

上面的代码中使用了枚举 enum 避免"魔法字符串"的出现。值得一提，ts 中也可以使用 js 的方式使用，那么就没有发挥出‘T’的作用。

尤其在大型项目里面触发数据的类型可能会出现意想不到的 bug，然后定位 bug 可能得花上好几个小时。也可能会出现触发事件的事件名字符串写错（俗称魔法字符串）导致达不到预期效果。

总结

经过上述代码示例，可能觉得 ts 的写法似乎更加麻烦了，不如 js 来的快。但是，我个人认为使用 ts 开发不仅仅是提示友好，而且能有效避开很多的坑。可谓:"未雨绸缪"胜过“亡羊补牢”的好。

最后，需要这篇文有帮到你。如有谬误，不吝赐教

本文链接地址:https://www.jiuchutong.com/zhishi/294544.html 转载请保留说明！

上一篇：炫酷登录注册完整功能版【本地存储+JS+HTML+CSS+jQuery】(炫酷登录注册教程)

下一篇：10分钟搞定win11安卓子系统(10分钟搞定3种网红小吃)