Comment utiliser les accessoires et les émissions dans vue3 et spécifier leur type et leur valeur par défaut-Voir.js-php.cn

Comment utiliser les accessoires et les émissions dans vue3 et spécifier leur type et leur valeur par défaut

王林

Libérer： 2023-05-19 17:21:19

avant

2586 Les gens l'ont consulté

L'utilisation de finishProps

defineProps n'a pas besoin d'être introduite lors de son utilisation. La méthode par défaut est la méthode globale. defineProps在使用的时候无需引入，默认是全局方法。

在 js 开发的 vue3 项目中使用

const props = defineProps({
  attr1: {
    type: String, // S 必须大写
    default: "",
  },
  attr2: Boolean,
  attr3: {
    type: Number,
    required: true,
  },
});

Copier après la connexion

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

Copier après la connexion

使用 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 });

Copier après la connexion

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

Copier après la connexion

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

Utilisé dans les projets vue3 développés par js

rrreeeL'utilisation dans l'environnement js est similaire à vue2, mais avec des options L'API a été remplacé par une API combinée. Le type de props défini et la valeur par défaut sont les mêmes que le type vue2. Vue3 utilise l'API defineProps, qui ne sera pas présentée ici. 🎜

🎜 Utilisé dans le projet vue3 développé par ts🎜

rrreee🎜 Utilisez TypeScript pour développer le projet vue3 afin de définir des accessoires. Il y en a deux. principales API utilisées : defineProps définit les props reçus, withDefaults définit le type reçu. 🎜🎜Bien sûr, vous pouvez définir des accessoires de la même manière qu'un environnement JavaScript, mais cela irait à l'encontre de l'intérêt d'utiliser TypeScript. L'utilisation de 🎜🎜defineEmits 🎜🎜 est différente de vue2 : vue3 doit définir l'événement avant de déclencher l'événement. Dans Vue3, `defineEmits` est également une API globale🎜

🎜utilisée dans js🎜

rrreee

🎜Utilisé dans TS🎜

rrreee🎜Le code ci-dessus utilise l'énumération enum pour éviter l'apparition de "chaînes magiques". Il est à noter que js peut également être utilisé dans ts, il ne jouera donc pas son rôle. 🎜🎜Surtout dans les projets à grande échelle, des erreurs inattendues peuvent survenir lors du déclenchement des types de données, ce qui peut prendre des heures pour localiser l'erreur. La chaîne magique peut être écrite de manière incorrecte, ce qui entraîne l'incapacité d'obtenir l'effet déclencheur d'événement attendu. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!