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

更新时间：2023年04月06日 09:04:19 作者：鱼干拌饭

props是Vue3中的一个重要概念,它允许我们将数据从父组件传递到子组件,下面这篇文章主要给大家介绍了关于vue3中使用props和emits并指定其类型与默认值的相关资料,需要的朋友可以参考下

前言

本文主要描述 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: {},
  }
);

使用 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 开发不仅仅是提示友好，而且能有效避开很多的坑。可谓:"未雨绸缪"胜过“亡羊补牢”的好。

到此这篇关于vue3中使用props和emits并指定其类型与默认值的文章就介绍到这了,更多相关vue3使用props和emits内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vant框架van-cell插槽无法换行问题及解决
这篇文章主要介绍了vant框架van-cell插槽无法换行问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
如何使用Webstorm和Chrome来调试Vue项目
这篇文章主要介绍了如何使用Webstorm和Chrome来调试Vue项目，对Vue感兴趣的同学，一定要看一下
2021-05-05
Vue获取input值的四种常用方法
Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下
2023-09-09
vue eslint简要配置教程详解
这篇文章主要介绍了vue eslint简要配置,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-07-07
Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数
有些传递的参数是直接拼接到URL地址栏中的、但是为了统一管理、不能将传递的参数直接拼接到地址栏中，接下来通过本文给大家介绍Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数，感兴趣的朋友一起看看吧
2022-10-10
vue关于页面刷新的几个方式解读
这篇文章主要介绍了vue关于页面刷新的几个方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue项目中使用axios上传图片等文件操作
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作，需要的朋友参考下吧
2017-11-11
element中Select选择器实现自定义显示内容
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,本文主要介绍了element中Select选择器实现自定义显示内容,感兴趣的可以了解一下
2023-12-12
Vue3中的极致防抖/节流详解(附常见方式防抖/节流)
在JavaScript中函数的防抖和节流不是什么新鲜话题,这篇文章主要给大家介绍了关于Vue3中极致防抖/节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
vue在IIS服务器部署后路由无法跳转
在IIS服务器上部署Vue项目时,可能会遇到路由无法正常跳转的问题,解决方法有两种,下面就来具体介绍一下解决方法,感兴趣的可以了解一下
2024-10-10