Jadual Kandungan
Komponen Migrasi
Pulangan tersirat
defineProps
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
Rumah hujung hadapan web View.js Cara menggunakan

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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

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

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

Atau lebih baik lagi, gunakan TypeScript:

const emit = defineEmits({
  selected: () => true
});
Salin selepas log masuk

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

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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan tinymce dalam projek vue3 Cara menggunakan tinymce dalam projek vue3 May 19, 2023 pm 08:40 PM

Cara menggunakan tinymce dalam projek vue3

vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src May 21, 2023 pm 03:16 PM

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 Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod May 20, 2023 pm 04:16 PM

Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod

Cara memuat semula sebahagian kandungan halaman dalam Vue3 Cara memuat semula sebahagian kandungan halaman dalam Vue3 May 26, 2023 pm 05:31 PM

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 Bagaimana untuk menyelesaikan masalah bahawa selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses dipaparkan kosong May 17, 2023 am 08:19 AM

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 komponen boleh guna semula Vue3 May 20, 2023 pm 07:25 PM

Cara menggunakan komponen boleh guna semula Vue3

Cara menggunakan defineCustomElement untuk menentukan komponen dalam Vue3 Cara menggunakan defineCustomElement untuk menentukan komponen dalam Vue3 May 28, 2023 am 11:29 AM

Cara menggunakan defineCustomElement untuk menentukan komponen dalam Vue3

Bagaimana untuk memilih avatar dan memangkasnya dalam Vue3 Bagaimana untuk memilih avatar dan memangkasnya dalam Vue3 May 29, 2023 am 10:22 AM

Bagaimana untuk memilih avatar dan memangkasnya dalam Vue3

See all articles