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

目录
  • 前言
  • defineProps 的使用
  • defineEmits 的使用
  • 总结

前言

本文主要描述 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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue的子组件props如何设置多个校验类型

    目录 vue子组件props设置多个校验值 vue组件参数校验 参数校验一 参数校验二 参数校验三 总结 vue子组件props设置多个校验值 1. type使用 | 进行隔开 props: {     iconClass: {       type: String | null,       required: true,       default: ""     } }, 2. 使用数组 props: {   iconClass: [String , null] }, 3. 使用

  • Vue中props组件和slot标签的区别

    在 Vue 中,props 和 slot 都是组件之间进行通信的机制,它们的作用和应用场景有一些区别: props 是一种组件的数据传递机制,通过在父组件中以属性的形式向子组件传递数据.子组件接收这些数据,并可以进行相应的处理和渲染.props 在组件开发中非常常见,可以让我们更加方便和灵活地进行组件间的数据传递. slot 是一种插槽机制,用于在组件内部放置一些用户自定义的内容或者组件.通俗来说,可以把 slot 看成是组件内部的一个容器,可以在组件使用时向其中动态插入内容. slot 可以用

  • React中的Props类型校验和默认值详解

    React中的Props类型校验和默认值详解

    目录 一.props规则校验 二.props默认值 1.函数式默认值 1.1 函数参数默认值(新版推荐) 1.2 defaultProps 设置默认值 2.类式默认值 2.1 defaultProps 2.2 类静态属性声明 总结 一.props规则校验 安装 prop-types 包 $ npm install prop-types 导入 propTypes 对象 import propTypes from 'prop-types'; 组件名.propTypes = {} 设置组件 传参规则

  • mysql中datetime类型设置默认值方法

    通过navicat客户端修改datetime默认值时,遇到了问题. 数据库表字段类型datetime,原来默认为NULL,当通过界面将默认值设置为当前时间时,提示"1067-Invalid default value for 'CREATE_TM'",而建表的时候,则不会出现这个问题,比如建表语句: CREATE TABLE `app_info1` ( `id` bigint(21) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键ID', `a

  • mybatis中查询结果为空时不同返回类型对应返回值问题

    今天在别人的代码基础上实现新需求,看到对于mybatis查询结果的判断不是很正确,如果查询结果为空就会异常,不知道大家有没有这样的疑惑:mybatis中resultType有多种返回类型,对于每种不同类型,查询结果为空时dao接口的返回值是一样的吗?接下来我就总结一下常见的几种情况. 第一种:resultType为基本类型,如string(在此暂且把string归纳为基本类型) 如果select的结果为空,则dao接口返回结果为null 第二种,resultType为基本类型,如int 后台报异

  • vue3中的props组件抽离

    vue3中的props组件抽离

    目录 props组件抽离 引言 场景 组件模板抽离的写法 props组件抽离 引言 假设你已经了解了Vue3的setup函数,不了解的话可以先看看这篇文章. vue3中setup函数的使用 在setup函数中我们知道它有两个参数,用于接收父组件传递参数的props.与负责表示上下文对象的context,在context中常用的是分发自定义事件的函数emit,用于组件抽象化后的通信. 在了解了概念后我们可以在本文中动手抽象分离一个组件. 场景 现在假设需要抽象出一个移动端的顶部Header组件,首

  • Java Map.get()返回指定键所映射的值

    Java Map.get()返回指定键所映射的值

    Java 集合类中的 Map.get() 方法返回指定键所映射的值.如果此映射不包含该键的映射关系,则返回 null. 语法: get(Object key)) 参数说明: key:是指定的 Map 集合中的键名. 典型应用 本示例使用 HashMap 类创建 Map 集合对象,并向集合中添加指定的内容,然后使用 get 方法获取指定键名的键值对象.代码如下: public static void main(String[] args){ Map map = new HashMap(); //定

  • python函数指定默认值的实例讲解

    1.说明 (1)写函数时,可以为每个参数指定默认值.当调用函数为参数提供实际参数时,Python将使用指定的实际参数:否则,将使用参数的默认值.因此,给参数指定默认值后,可以在函数调用中省略相应的参数. (2)使用默认值可以简化函数调用,明确指出函数的典型用法. 2.实例 >>> def student(name, age=18): ... print('Hello, My name is ' + name + ', I am ' + str(age) + ' years old') .

  • Python中自定义函方法与参数具有默认值的函数

    Python中自定义函方法与参数具有默认值的函数

    目录 一.Python中自定义函数的方法 1自定义函数的语法 2自定义函数的实现 3自定义函数的调用 二.Python中参数具有默认值的函数 1参数是常量默认值的函数 2参数是常量默认值的函数 一.Python中自定义函数的方法 在Python编程中,可以使用已经定义好的函数,也可以自定义函数实现某些特殊的功能. 1 自定义函数的语法 在Python中,自定义函数的语法如下所示: def 函数名(参数):     函数体 其中,def是关键字:之后跟的是函数名,通过函数名来调用该函数:函数名之后

  • 使用JavaBean根据指定条件设置属性值默认值方式

    目录 JavaBean根据指定条件设置属性值默认值 使用场景 使用范围 使用示例 JavaBean对象成员变量默认值及数组默认值 JavaBean根据指定条件设置属性值默认值 使用场景 当bean数据中已经装配好其他数据,在逻辑以及数据转换完成的最后一步进行数据默认值设置:如果bean的属性较少,可以手动写if条件就行了,如果bean的属性太多,你不希望写太多if的时候,这个方法是很不错的方法: 使用范围 仅限于当前类,不能给父类设置值 也是参考了其他博主的方法,做的优化和修改,由于时间过了很长

  • java 如何给对象中的包装类设置默认值

    目录 给对象中的包装类设置默认值 处理方法如下 java属性的默认值 给对象中的包装类设置默认值 处理方法如下 主要适用于,对象中使用了包装类,但是不能给null需要有默认值的情况 /** * 处理对象中包装类,因为快捷签没有用包装类 * * @param object 对象 */ public static void handleParamDefault(Object object) { Class<?> aClass = object.getClass(); Field[] declare

  • 列出SQL Server中具有默认值的所有字段的语句

    列出SQL Server中具有默认值的所有字段的语句

    专家解答 通过查询任何数据库中的三个系统表,你可以获得每个表的每一个字段的默认值.下面是这个核心查询.它返回分配给当前数据库中每个用户表的默认值.这个查询在SQL 2000和SQL 2005中都是兼容的. Quote:  复制代码 代码如下: SELECT SO.NAME AS "Table Name", SC.NAME AS "Column Name", SM.TEXT AS "Default Value" FROM dbo.sysobject

随机推荐