vue3中使用props和emits并指定其類型與默認值

更新時間：2023年04月06日 09:04:19 作者：魚干拌飯

props是Vue3中的一個重要概念,它允許我們將數(shù)據(jù)從父組件傳遞到子組件,下面這篇文章主要給大家介紹了關于vue3中使用props和emits并指定其類型與默認值的相關資料,需要的朋友可以參考下

前言

本文主要描述 vue3 中 defineProps 與 defineEmits 分別在 JS 環(huán)境和 TS 環(huán)境中的使用方法。

defineProps 的使用

defineProps在使用的時候無需引入，默認是全局方法。

在 js 開發(fā)的 vue3 項目中使用

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

js 環(huán)境中使用與 vue2 的使用方法類似，只是選項式 API 換成了組合式 API。定義 props 類型與默認值都與 vue2 類型，vue3 中使用的是definePropsAPI，在此不多介紹。

在 ts 開發(fā)的 vue3 項目中使用

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

const props = withDefaults(
  // 參數(shù)一：定義props類型：? 代表非必傳字段， :號后面緊跟的是數(shù)據(jù)類型或自定義接口， | 或多種類型
  defineProps<{
    name: string;
    age?: number;
    detail?: DeatilInf | any;
  }>(),
  // 參數(shù)二：指定非必傳字段的默認值
  {
    age: 18,
    detail: {},
  }
);

使用 typeScript 開發(fā) vue3 項目定義 props 主要使用的 API 有兩個： defineProps 定義接收的 props 、withDefaults 定義接收的類型。

當然，你也可以使用上述 js 環(huán)境使用的方法定義 props，但這樣做就失去了使用 TS 的意義了。

defineEmits 的使用

與 vue2 不同：vue3 在觸發(fā)事件之前需要定義事件。同樣在 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 避免"魔法字符串"的出現(xiàn)。值得一提，ts 中也可以使用 js 的方式使用，那么就沒有發(fā)揮出‘T’的作用。

尤其在大型項目里面觸發(fā)數(shù)據(jù)的類型可能會出現(xiàn)意想不到的 bug，然后定位 bug 可能得花上好幾個小時。也可能會出現(xiàn)觸發(fā)事件的事件名字符串寫錯（俗稱魔法字符串）導致達不到預期效果。