


Komponen Migrasi
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>
Pulangan tersirat
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
defineProps
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
Vue menyediakan pembantu yang hampir sama dengan pembantu. Ayat ini sudah jelas menyatakan fungsi dan operasi yang sepadan, jadi sukar untuk menulis semula dalam satu ayat. Tetapi jika anda mesti menulis semula, anda boleh mencuba kaedah berikut: 1. Fungsi ini digunakan untuk menentukan dan mencetuskan peristiwa. 2. Fungsi defineEmits, defineProps dan defineEmitsemit semuanya berkaitan dengan acara. 3. Jika anda perlu mentakrif, menetapkan dan mencetuskan peristiwa, anda boleh menggunakan fungsi defineEmits, defineProps dan defineEmitsemit. 4. Fungsi ini boleh membantu anda mengurus acara dalam Vue.js
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
Terdapat beberapa perbezaan halus yang membezakan dua cara untuk mengisytiharkan komponen: komponen "tidak didayakan secara lalai ". Ini bermakna komponen lain tidak dapat melihat apa yang ditakrifkan di dalam komponen. persediaan skrip
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

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cara menggunakan tinymce dalam projek vue3

vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src

Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod

Cara memuat semula sebahagian kandungan halaman dalam Vue3

Bagaimana untuk menyelesaikan masalah bahawa selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses dipaparkan kosong

Cara menggunakan komponen boleh guna semula Vue3

Cara menggunakan defineCustomElement untuk menentukan komponen dalam Vue3

Bagaimana untuk memilih avatar dan memangkasnya dalam Vue3
