vue中的props是什么意思（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 开发不仅仅是提示友好 
 
  
 
  
 
  
 
  
 
  
 ，而且能有效避开很多的坑










。可谓:"未雨绸缪"胜过“亡羊补牢           ”的好                 。

最后









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