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

這篇文章主要介紹了vue3中怎么使用props和emits并指定其類型與默認值的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue3中怎么使用props和emits并指定其類型與默認值文章都會有所收獲，下面我們一起來看看吧。

defineProps 的使用

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 中使用的是definePropsAPI，在此不多介紹。

• 在 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 定義接收的類型。

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

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 避免"魔法字符串"的出現。值得一提，ts 中也可以使用 js 的方式使用，那么就沒有發揮出的作用。

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

關于“vue3中怎么使用props和emits并指定其類型與默認值”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue3中怎么使用props和emits并指定其類型與默認值”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。