Heim > Artikel > Web-Frontend > So verwenden Sie Requisiten und Emission in vue3 und geben deren Typ und Standardwert an
defineProps
muss bei der Verwendung nicht eingeführt werden. Die Standardeinstellung ist die globale Methode. 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
定义接收的类型。
当然,你可以使用与 JavaScript 环境相同的方式来定义 props,但这种做法会削弱使用 TypeScript 的意义。
与 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
defineProps
verwendet, die hier nicht vorgestellt wird. 🎜defineProps
definiert die empfangenen Requisiten, withDefaults
definiert den empfangenen Typ. 🎜🎜Natürlich könnten Sie Requisiten auf die gleiche Weise wie eine JavaScript-Umgebung definieren, aber das würde den Sinn der Verwendung von TypeScript zunichte machen. Die Verwendung von 🎜🎜defineEmits 🎜🎜 unterscheidet sich von vue2: vue3 muss das Ereignis definieren, bevor es das Ereignis auslöst. In Vue3 ist „defineEmits“ auch eine globale API🎜enum
, um das Auftreten von „magischen Zeichenfolgen“ zu vermeiden. Es ist erwähnenswert, dass js auch in ts verwendet werden kann, sodass es keine Rolle spielt. 🎜🎜Besonders bei Großprojekten kann es beim Auslösen von Datentypen zu unerwarteten Fehlern kommen, sodass die Fehlerlokalisierung Stunden dauern kann. Die magische Zeichenfolge ist möglicherweise falsch geschrieben, was dazu führt, dass der erwartete ereignisauslösende Effekt nicht erzielt wird. 🎜Das obige ist der detaillierte Inhalt vonSo verwenden Sie Requisiten und Emission in vue3 und geben deren Typ und Standardwert an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!