Cara menggunakan props dan emit dalam vue3 dan nyatakan jenis dan nilai lalainya

Penggunaan defineProps

defineProps Tidak perlu memperkenalkannya apabila menggunakannya Cara lalai ialah kaedah global.

• Digunakan dalam projek vue3 yang dibangunkan oleh js

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

Penggunaan dalam persekitaran js adalah serupa dengan vue2, kecuali API pilihan digantikan dengan Composable API. Jenis prop yang ditentukan dan nilai lalai semuanya sama dengan jenis vue2 definePropsAPI digunakan dalam vue3, yang tidak akan diperkenalkan di sini.

• Digunakan dalam projek vue3 yang dibangunkan oleh ts

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

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

Gunakan typeScript untuk membangunkan projek vue3 untuk mentakrifkan props yang digunakan: defineProps Tentukan prop yang diterima, withDefaults Tentukan jenis yang diterima.

Sudah tentu, anda boleh mentakrifkan prop dengan cara yang sama seperti persekitaran JavaScript, tetapi itu akan mengalahkan penggunaan TypeScript.

Penggunaan defineEmits

berbeza daripada vue2: vue3 perlu mentakrifkan acara sebelum mencetuskan acara. Dalam Vue3, `defineEmits` juga merupakan API global

• Digunakan dalam js

const emits = defineEmits(["change", "input"]);
emits("chage", "data");
emits("input", { data: 123 });

• Digunakan dalam 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");

Kod di atas menggunakan penghitunganenum untuk mengelakkan kemunculan "tali ajaib". Perlu dinyatakan bahawa js juga boleh digunakan dalam ts, jadi ia tidak akan memainkan peranannya.

Terutama dalam projek berskala besar, ralat yang tidak dijangka mungkin berlaku apabila mencetuskan jenis data, jadi ia mungkin mengambil masa berjam-jam untuk mengesan ralat. Rentetan ajaib mungkin ditulis dengan salah, mengakibatkan kegagalan untuk mencapai kesan pencetus peristiwa yang dijangkakan.

Atas ialah kandungan terperinci Cara menggunakan props dan emit dalam vue3 dan nyatakan jenis dan nilai lalainya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!