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 &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
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 ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
    function clicked() {
      emit(&#39;selected&#39;);
    }
 
    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 &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
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 ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
 
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 &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
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 ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
</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: &#39;selected&#39;): 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