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

这篇具有很好参考价值的文章主要介绍了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 开发不仅仅是提示友好,而且能有效避开很多的坑。可谓:"未雨绸缪"胜过“亡羊补牢”的好。

最后,需要这篇文有帮到你。如有谬误,不吝赐教文章来源地址https://www.toymoban.com/news/detail-448390.html

到了这里,关于vue3 中使用 props, emits 并指定其类型与默认值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue前端框架10 组件的组成、组件嵌套关系、组件的注册方式、组件传递数据(props $emit)、数组传递多种数据类型、组件传递props校验、组件事件

    组件最大的优势就是可复用性 通常将组件定义在.vue中,也就是SFC单文件组件 组件的基本组成: 组件允许我们将UI划分为独立的、可重用的部分,并且对每个部分单独思考 实际应用中组件常常被组件成层层嵌套的树状结构 Vue组件使用前要注册,注册有两种方式:全局注册和

    2024年02月09日
    浏览(50)
  • vue前端开发自学练习,Props数据传递-类型校验,默认值的设置!

     vue前端开发自学练习,Props数据传递-类型校验,默认值的设置! 实际上,vue开发框架的时候,充分考虑到了前端开发人员可能会遇到的各种各样的情况,比如大家经常遇到的,数据类型的校验,再比如,默认值的设定等等。下面给大家展示一下,源码。和实际的效果。 如图,

    2024年01月23日
    浏览(39)
  • Vue3中props传参(多种数据类型传参方式)

    在Vue3中,`props`接收的`type`类型有以下几种: 1. String:字符串类型 2. Number:数字类型 3. Boolean:布尔类型 4. Array:数组类型 5. Object:对象类型 6. Date:日期类型 7. Function:函数类型 8. Symbol:符号类型 9. [Custom Types]:自定义类型 你也可以使用数组形式来表示多种类型的

    2024年02月03日
    浏览(45)
  • Vue3通透教程【十八】TS为组件的props标注类型

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月16日
    浏览(37)
  • vue3中emit(‘update:modelValue‘)使用

    父 子(setup语法糖) 子(常规写法)

    2024年02月06日
    浏览(33)
  • Vue3 props的使用详解

    Props 声明 1、字符串数组声明props  2.对象实现props 你还可以使用类型标注,这是ts的特性。 3、使用camelCase(小驼峰命名法),可以在模板中直接使用(如第一个例子)。看代码 4、动态绑定props 注意事项:defineprops在之前的Vue版本中需要引入,但是现在是不需要了。上面几个例子

    2024年02月16日
    浏览(49)
  • Vue组件的嵌套关系;父组件传递子组件props;子组件传递给父组件$emit;自定义事件;案例

    前面将所有的逻辑放到一个App.vue中: 在之前的案例中,只是创建了一个组件App; 如果一个应用程序将所有的逻辑都放在一个组件中,那么这个组件就会变成非常的臃 肿和难以维护; 所以组件化的核心思想应该是对组件进行拆分,拆分成一个个小的组件; 再将这些组件组合

    2024年02月13日
    浏览(45)
  • vue3 useAttrs的使用场景,提取共有props

    多个类似组件都需要传参data,用于请求接口或者处理数据,想让组件干净整洁,把参数data提出来 选项式 可以使用mixin混入或者extends继承(略) 组合式 可以使用hook 无脑式踩坑(如下代码): // hook // component 当在组件中引用hook后,控制台会警告,同时组件无法渲染 解决方

    2024年02月02日
    浏览(54)
  • 【vue3 之 emits & $emit() 讲解 】监听子组件事件、emit事件验证、options写法、composition setup写法

    前言:不懂在父组件里对子组件 @xxxx 声明自定义事件,就不用看本篇文章了。本篇对此内容不做任何说明。这是与 emits 结合使用的必备知识! 场景说明: 组件功能封装:         组件封装了一系列 emit 事件,并返回数据、回调函数等,或单纯执行某个操作后,触发父组

    2023年04月09日
    浏览(54)
  • 父组件明明使用了v-model,子组件竟然可以不用定义props和emit抛出事件,快来看看吧

    vue3.4增加了 defineModel 宏函数,在子组件内修改了 defineModel 的返回值,父组件上 v-model 绑定的变量就会被更新。大家都知道 v-model 是 :modelValue 和 @update:modelValue 的语法糖,但是你知道为什么我们在子组件内没有写任何关于 props 的定义和 emit 事件触发的代码吗?还有在 template

    2024年04月08日
    浏览(80)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包