Vue Academy · Pelajaran

Props dan Peristiwa Tersuai

Hantar data ke bawah dengan props dan pancarkan peristiwa ke komponen induk.

Pelajaran 2 daripada 313 langkah

Props dan Peristiwa Tersuai ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.

Komunikasi Induk-Anak

Komponen berkomunikasi dalam dua arah:

Props menghantar data ke bawah daripada induk kepada anak
Acara menghantar mesej ke atas daripada anak kepada induk

Aliran data sehala ini menjadikan app lebih mudah dijangka.

Mengisytiharkan Props

Anak mengisytiharkan props yang diterimanya. Dalam script setup, gunakan defineProps.

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

Props dengan Jenis

Isytiharkan props sebagai objek untuk menentukan jenis bagi pengesahan.

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

Props dengan Nilai Lalai dan Wajib

Anda boleh menandakan props sebagai wajib dan memberikan nilai lalai.

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

Menghantar Props daripada Induk

Induk menghantar data sebagai atribut. Gunakan : untuk mengikat nilai dinamik.

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

Konvensyen Penamaan Prop

Isytiharkan props dalam camelCase di dalam JS, dan hantarkannya dalam kebab-case di dalam templat.

Prop JS: isActive
Atribut templat: :is-active

Vue menukar antara kedua-duanya secara automatik.

Props Bersifat Baca Sahaja

Anak tidak boleh mengubah propsnya secara langsung.

Props mengalir sehala, ke bawah
Mengubahnya menjejaskan kebolehramalan dan mencetuskan amaran
Untuk mengubah data dikongsi, emit satu acara supaya induk mengemas kininya

Mengisytiharkan Acara yang Dipancarkan

Anak mengisytiharkan acara yang dipancarkannya dengan defineEmits.

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

Memancarkan Acara

Panggil fungsi emit untuk menghantar acara ke atas, secara pilihan bersama muatan.

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

Memancarkan Acara dalam API Options

Dalam API Options, panggil this.$emit sebagai gantinya.

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

Induk Mendengar Acara

Induk mendengar dengan @event-name dan menerima muatan tersebut.

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

Semakan Pantas

Uji pemahaman anda tentang props dan acara.

Jawab dalam pelajaran interaktif

Imbas Kembali: Props dan Acara

Anda telah mempelajari komunikasi komponen:

defineProps mengisytiharkan props dengan jenis dan nilai lalai
Props mengalir ke bawah dan bersifat baca sahaja
defineEmits mengisytiharkan acara
emit("name", payload) menghantar acara ke atas
Induk mendengar dengan @event

Seterusnya: slot dan slot berskop.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Props dan Peristiwa Tersuai” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Props dan Peristiwa Tersuai”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Props dan Peristiwa Tersuai”?

Hantar data ke bawah dengan props dan pancarkan peristiwa ke komponen induk. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 3.

Berapa lamakah pelajaran “Props dan Peristiwa Tersuai” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy