这篇文章主要介绍了vue3中怎么使用props和emits并指定其类型与默认值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3中怎么使用props和emits并指定其类型与默认值文章都会有所收获,下面我们一起来看看吧。
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 中使用的是defineProps
API,在此不多介绍。
在 ts 开发的 vue3 项目中使用
interface DeatilInf {
aaa: string;
bbb: number;
}
const props = withDefaults(
// 参数一:定义props类型:? 代表非必传字段, :号后面紧跟的是数据类型或自定义接口, | 或多种类型
defineProps<{
name: string;
age?: number;
detail?: DeatilInf | any;
}>(),
// 参数二:指定非必传字段的默认值
{
age: 18,
detail: {},
}
);
使用 typeScript 开发 vue3 项目定义 props 主要使用的 API 有两个: defineProps
定义接收的 props 、withDefaults
定义接收的类型。
当然,你也可以使用上述 js 环境使用的方法定义 props,但这样做就失去了使用 TS 的意义了。
与 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 的方式使用,那么就没有发挥出的作用。
尤其在大型项目里面触发数据的类型可能会出现意想不到的 bug,然后定位 bug 可能得花上好几个小时。也可能会出现触发事件的事件名字符串写错(俗称魔法字符串)导致达不到预期效果。
关于“vue3中怎么使用props和emits并指定其类型与默认值”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue3中怎么使用props和emits并指定其类型与默认值”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://blog.csdn.net/qq_44900902/article/details/129078576