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

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

特別是在大規模專案中觸發資料類型可能會出現意料之外的錯誤，因此需要定位錯誤可能需要花費數小時的時間。可能出現魔法字串的錯誤寫法，導致無法達到預期的事件觸發效果。

以上是vue3中怎麼使用props和emits並指定其類型與預設值的詳細內容。更多資訊請關注PHP中文網其他相關文章！