vue3 でプロップとエミットを使用し、そのタイプとデフォルト値を指定する方法

definePropsの使い方

defineProps使用する場合は導入する必要はなく、デフォルトはグローバルメソッドです。

• js によって開発された vue3 プロジェクトで使用されます

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

js 環境での使用法は、オプションの API が異なることを除いて、vue2 の使用法と似ています。コンポーザブル API に置き換えられました。定義されている props の型とデフォルト値は vue2 の型と同じですが、vue3 では defineProps API が使用されますが、ここでは紹介しません。

• ts

interface DeatilInf {
  aaa: string;
  bbb: number;
}

const props = withDefaults(
  // 参数一：定义props类型：? 代表非必传字段， :号后面紧跟的是数据类型或自定义接口， | 或多种类型
  defineProps<{
    name: string;
    age?: number;
    detail?: DeatilInf | any;
  }>(),
  // 参数二：指定非必传字段的默认值
  {
    age: 18,
    detail: {},
  }
);

によって開発された vue3 プロジェクトで使用されます

typeScript を使用して vue3 プロジェクトを開発し、小道具を定義します。使用される主な API は 2 つあります。 : 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 });

• 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を使用して「マジック文字列」の出現を回避しています。 js は ts でも使用できるため、その役割を果たさないことに注意してください。

特に大規模なプロジェクトでは、データ型をトリガーするときに予期しないエラーが発生する可能性があるため、エラーを特定するのに数時間かかることがあります。マジックストリングが正しく書かれていない可能性があり、その結果、期待されるイベントトリガー効果が得られない可能性があります。

以上がvue3 でプロップとエミットを使用し、そのタイプとデフォルト値を指定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。