0Pricing
Vue Academy · Pelajaran

Masalah Prop Drilling

Alasan prop drilling menyulitkan pemeliharaan, hal yang diselesaikan provide/inject, kapan menggunakannya.

Masalah Prop Drilling adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu Prop Drilling

Prop drilling adalah proses meneruskan data melalui banyak lapisan komponen hanya untuk mencapai komponen yang berada jauh di dalam hierarki. Setiap komponen perantara harus menerima dan meneruskan prop tersebut meskipun tidak pernah menggunakannya.

Pohon Komponen yang Dalam

Bayangkan sebuah pohon: App -> Layout -> Page -> Section -> Widget. Widget di bagian bawah memerlukan tema saat ini, tetapi hanya App di bagian atas yang mengetahuinya.

App
  Layout
    Page
      Section
        Widget  <-- needs "theme"

Meneruskannya dari App

App menyimpan tema dan meneruskannya ke Layout sebagai prop.

<!-- App.vue -->
<Layout :theme="theme" />

Layout Meneruskannya

Layout tidak menggunakan tema tersebut, tetapi harus mendeklarasikannya dan meneruskannya, hanya agar tema itu mencapai tingkat berikutnya.

<!-- Layout.vue -->
const props = defineProps({ theme: String });
// template:
<Page :theme="props.theme" />

Page Juga Meneruskannya

Page mengulangi kode pendukung yang sama—mendeklarasikan, lalu meneruskan—meskipun tidak membutuhkan tema tersebut.

<!-- Page.vue -->
const props = defineProps({ theme: String });
<Section :theme="props.theme" />

Section Meneruskannya Lagi

Hal yang sama terjadi pada Section. Setiap lapisan menambahkan kode penghubung yang berulang dan tidak berkaitan dengan tanggung jawab lapisan tersebut.

<!-- Section.vue -->
const props = defineProps({ theme: String });
<Widget :theme="props.theme" />

Akhirnya Widget Menggunakannya

Baru di bagian paling bawah Widget benar-benar menggunakan tema tersebut. Empat lapisan di atasnya hanya meneruskan data.

<!-- Widget.vue -->
const props = defineProps({ theme: String });
// uses props.theme to style itself

Mengapa Ini Menyulitkan

Prop drilling menimbulkan beberapa masalah:

  • Kode pendukung harus ditulis di setiap komponen perantara
  • Refaktor dapat merusak banyak file ketika nama prop berubah
  • Prop perantara mengaburkan kebutuhan sebenarnya setiap komponen
  • Sulit menambahkan nilai bersama yang baru

Lebih Buruk dengan Banyak Nilai

Sekarang tambahkan user, locale, dan permissions. Masing-masing harus diteruskan melalui keempat lapisan, sehingga kode pendukung yang berulang semakin banyak.

<Layout
  :theme="theme"
  :user="user"
  :locale="locale"
  :permissions="permissions"
/>

Tidak Semua Nilai Bersama Perlu Menjadi Props

Props sangat baik untuk komunikasi langsung antara komponen induk dan anak. Namun, untuk nilai yang dibutuhkan jauh di dalam suatu subpohon—tema, pengguna saat ini, i18n—meneruskannya melalui setiap lapisan bukanlah alat yang tepat. Kita memerlukan cara untuk menyediakan data langsung kepada semua komponen turunan.

Memperkenalkan Provide dan Inject

Vue provide / inject memungkinkan komponen leluhur menyediakan data yang dapat diminta langsung oleh komponen turunan mana pun, tanpa melewati setiap lapisan perantara. Pelajaran berikutnya membahas cara menyediakan dan mengambil data tersebut.

Pemeriksaan Singkat

Manakah yang paling tepat menggambarkan prop drilling?

Ringkasan

Anda telah melihat bahwa prop drilling memaksa setiap komponen perantara dalam pohon yang dalam untuk mendeklarasikan dan meneruskan props yang tidak digunakannya, sehingga menimbulkan kode pendukung berulang dan refaktor yang rapuh. Provide/inject adalah solusi yang lebih bersih untuk nilai yang digunakan bersama jauh di dalam hierarki.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Masalah Prop Drilling” gratis?

Ya — teks lengkap “Masalah Prop Drilling” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Masalah Prop Drilling”?

Alasan prop drilling menyulitkan pemeliharaan, hal yang diselesaikan provide/inject, kapan menggunakannya. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Masalah Prop Drilling” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Masalah Prop Drilling
  2. provide() dalam Komponen Induk
  3. inject() dalam Komponen Anak
  4. Provide/Inject untuk State Tingkat Aplikasi
← Kembali ke Vue Academy