So verwenden Sie Requisiten und Emission in vue3 und geben deren Typ und Standardwert an-View.js-php.cn

So verwenden Sie Requisiten und Emission in vue3 und geben deren Typ und Standardwert an

王林

Freigeben： 2023-05-19 17:21:19

nach vorne

2587 Leute haben es durchsucht

Verwendung von defineProps

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,
  },
});

Nach dem Login kopieren

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: {},
  }
);

Nach dem Login kopieren

使用 typeScript 开发 vue3 项目定义 props 主要使用的 API 有两个： defineProps 定义接收的 props 、withDefaults 定义接收的类型。

当然，你可以使用与 JavaScript 环境相同的方式来定义 props，但这种做法会削弱使用 TypeScript 的意义。

defineEmits 的使用

与 vue2 不同：vue3 在触发事件之前需要定义事件。在Vue3中，`defineEmits`同样是一个全局API

js 中使用

const emits = defineEmits(["change", "input"]);
emits("chage", "data");
emits("input", { data: 123 });

Nach dem Login kopieren

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");

Nach dem Login kopieren

上面的代码中使用了枚举 enum

Wird in von js entwickelten vue3-Projekten verwendet

rrreeeDie Verwendung in der js-Umgebung ähnelt vue2, verfügt jedoch über Optionen, die die API bietet wurde durch eine kombinierte API ersetzt. Der definierte Requisitentyp und der Standardwert sind dieselben wie der vue2-Typ, der die API defineProps verwendet, die hier nicht vorgestellt wird. 🎜

🎜 Wird im von ts entwickelten vue3-Projekt verwendet🎜

rrreee🎜 Verwenden Sie TypeScript, um das vue3-Projekt zu entwickeln und Requisiten zu definieren. Es gibt zwei Verwendete Haupt-APIs: 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🎜

🎜verwendet in js🎜

rrreee

🎜Wird in TS verwendet🎜

rrreee🎜Der obige Code verwendet die Aufzählung 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!