Komponen berikut mempunyai dua prop (untuk dipaparkan dan bendera). Melalui komponen lain, kira URL imej kuda poni yang dipaparkan dalam templat, berdasarkan dua prop ini. Komponen itu juga memancarkan peristiwa apabila pengguna mengklik padanya. Imej yang dipilih semasa Model Ponipony sedang dijalankan.
Pony.vue
<template> <figure @click="clicked()"> <Image :src="ponyImageUrl" :alt="ponyModel.name" /> <figcaption>{{ ponyModel.name }}</figcaption> </figure> </template> <script lang="ts"> import { computed, defineComponent, PropType } from 'vue'; import Image from './Image.vue'; import { PonyModel } from '@/models/PonyModel'; export default defineComponent({ components: { Image }, props: { ponyModel: { type: Object as PropType<PonyModel>, required: true }, isRunning: { type: Boolean, default: false } }, emits: { selected: () => true }, setup(props, { emit }) { const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`); function clicked() { emit('selected'); } return { ponyImageUrl, clicked }; } }); </script>
Langkah pertama ialah menambah atribut pada elemen. Kemudian, kita hanya perlu menyimpan kandungan fungsi: semua boilerplate boleh hilang. Anda boleh mengalih keluar fungsi dalam: setupscriptsetupdefineComponentsetupscript
Pony.vue
<script setup lang="ts"> import { computed, PropType } from 'vue'; import Image from './Image.vue'; import { PonyModel } from '@/models/PonyModel'; components: { Image }, props: { ponyModel: { type: Object as PropType<PonyModel>, required: true }, isRunning: { type: Boolean, default: false } }, emits: { selected: () => true }, const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`); function clicked() { emit('selected'); } return { ponyImageUrl, clicked }; </script>
Mengalih keluar perisytiharan pengikatan peringkat atas dan pernyataan import pada penghujungnya akan menjadikannya secara automatik Menjadi tersedia untuk digunakan dalam templat. Jadi di sini dan tersedia, tidak perlu mengembalikannya. Apabila imej kuda poni diklik, skrip akan kembali.
Ayat ini boleh ditulis semula sebagai: "Kami hanya boleh mengimport komponen dan Vue akan secara automatik mengenali penggunaannya dalam templat, jadi pengisytiharan boleh ditinggalkan . " componentsImagecomponents
Pony.vue
<script setup lang="ts"> import { computed, PropType } from 'vue'; import Image from './Image.vue'; import { PonyModel } from '@/models/PonyModel'; props: { ponyModel: { type: Object as PropType<PonyModel>, required: true }, isRunning: { type: Boolean, default: false } }, emits: { selected: () => true }, const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`); function clicked() { emit('selected'); } </script>
Kami hampir sampai: kini kami perlu memindahkan pengisytiharan dan. propsmits
Vue menyediakan pembantu yang boleh anda gunakan untuk menentukan prop anda. Ini ialah pembantu masa kompilasi (makro) jadi anda tidak perlu mengimportnya dalam kod anda. Vue secara automatik mengenali komponen anda apabila menyusunnya. defineProps
defineProps mengembalikan props:
const props = defineProps({ ponyModel: { type: Object as PropType<PonyModel>, required: true }, isRunning: { type: Boolean, default: false } });
defineProps menerima pengisytiharan sebelumnya sebagai parameter. Tetapi kami boleh melakukan yang lebih baik untuk pengguna TypeScript! props
defineProps biasanya ditaip: anda boleh memanggilnya tanpa argumen, tetapi nyatakan antara muka sebagai "bentuk" prop. Tiada yang lebih dahsyat untuk ditulis! Kita boleh menggunakan jenis TypeScript yang betul dan menambah ???? untuk menandakan prop sebagai tidak perlu. Ditulis semula dalam bahasa yang lebih fasih: "Apabila Object digunakan sebagai jenis Props, adakah saya perlu menentukan jenis tertentu?"
const props = defineProps<{ ponyModel: PonyModel; isRunning?: boolean; }>();
Tetapi kami kehilangan beberapa maklumat. Dalam versi sebelumnya, kami boleh menentukan nilai lalainya sebagai . emits
defineEmits
interface Props { ponyModel: PonyModel; isRunning?: boolean; } const props = withDefaults(defineProps<Props>(), { isRunning: false });
Atau lebih baik lagi, gunakan TypeScript:
const emit = defineEmits({ selected: () => true });
Pengisytiharan komponen lengkap dipendekkan sebanyak 10 baris. Tidak buruk untuk mengurangkan 30 baris komponen! Melakukan ini membantu meningkatkan kebolehbacaan dan berfungsi dengan lebih baik dengan TypeScript. Walaupun terasa agak pelik apabila segala-galanya didedahkan secara automatik ke dalam templat, kerana tiada pemisah baris, anda akan terbiasa dengannya.
Pony.vue
const emit = defineEmits<{ (e: 'selected'): void; }>();
default-off dan defineExpose
Sebagai contoh, dalam bab seterusnya kita akan melihat bahawa komponen boleh mengakses komponen lain (dengan menggunakan rujukan). Apabila fungsi ditakrifkan sebagai XX, semua kandungan yang dikembalikan oleh fungsi itu juga boleh dilihat dalam komponen induk YY. Jika ditakrifkan dengan , komponen induk tidak kelihatan. Kandungan terdedah boleh dipilih dengan menambah pembantu. Yang awam kemudiannya boleh diakses sebagai . PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey
Atas ialah kandungan terperinci Cara menggunakan