Rumah > hujung hadapan web > View.js > Cara menggunakan props dan emit dalam vue3 dan nyatakan jenis dan nilai lalainya

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

王林
Lepaskan: 2023-05-19 17:21:19
ke hadapan
2691 orang telah melayarinya

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,
  },
});
Salin selepas log masuk

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: {},
  }
);
Salin selepas log masuk

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 });
Salin selepas log masuk
  • 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");
Salin selepas log masuk

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!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan