Vue Academy · Pelajaran

Pola Komponen Orde Tinggi (HOC)

Membungkus komponen dengan HOC, meneruskan props dan slot, serta menentukan kapan memakai HOC dibandingkan composable.

Pelajaran 4 dari 413 langkah

Pola Komponen Orde Tinggi (HOC) adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Komponen Orde Tinggi

Komponen Orde Tinggi (HOC) adalah fungsi yang menerima sebuah komponen dan mengembalikan komponen baru yang membungkusnya. Komponen ini menambahkan perilaku lintas fitur seperti pencatatan log, pemeriksaan autentikasi, atau pemuatan data tanpa mengubah komponen asli.

Signatur Fungsi

Secara konvensional, HOC diberi nama dengan awalan with. HOC menerima komponen yang dibungkus dan mengembalikan komponen yang ditingkatkan.

function withLogging(Wrapped) {
  // return a new component
}

Mengembalikan defineComponent

Komponen baru dibuat dengan defineComponent. Fungsi setup-nya merender komponen yang dibungkus melalui h.

import { defineComponent, h } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, ctx) {
      return () => h(Wrapped, props, ctx.slots);
    }
  });
}

Meneruskan Atribut

Agar pembungkus bersifat transparan, sebarkan ctx.attrs ke komponen yang dibungkus. Ini meneruskan kelas, gaya, dan properti lain yang tidak dikenali.

setup(props, { attrs, slots }) {
  return () => h(Wrapped, { ...attrs }, slots);
}

Meneruskan Slot

Teruskan objek slots milik pembungkus sebagai argumen anak agar komponen yang dibungkus tetap menerima semua konten slot dari penggunanya.

return () => h(Wrapped, attrs, slots);

Menambahkan Perilaku Lintas Fitur

Tujuan utamanya adalah menyuntikkan perilaku. Di sini, kita mencatat pemasangan dan pelepasan di sekitar komponen yang dibungkus.

import { onMounted, onUnmounted } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      onMounted(() => console.log("mounted"));
      onUnmounted(() => console.log("unmounted"));
      return () => h(Wrapped, attrs, slots);
    }
  });
}

Menggunakan HOC

Bungkus komponen apa pun dan gunakan hasilnya seperti komponen biasa dalam templat atau fungsi render lainnya.

import BaseTable from "./BaseTable.vue";

const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any component

Memberi Nama Pembungkus

Tetapkan name agar pembungkus dapat dikenali di Vue DevTools. Menggabungkan nama komponen yang dibungkus membuat pohon tetap mudah dibaca.

return defineComponent({
  name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
  setup(props, ctx) { /* ... */ }
});

Menyuntikkan Properti Tambahan

HOC dapat menyediakan properti tambahan untuk komponen yang dibungkus, seperti kumpulan data yang diambil atau penanda fitur.

function withUser(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      const user = inject("currentUser");
      return () => h(Wrapped, { ...attrs, user }, slots);
    }
  });
}

HOC vs Komposabel

Komposabel membagikan logika dan sering lebih disukai di Vue 3. HOC paling sesuai ketika Anda harus membungkus perenderan komponen yang sudah ada dan tidak dapat Anda edit, atau untuk menstandarkan batas seperti penanganan kesalahan.

Menggabungkan Beberapa HOC

Karena setiap HOC mengembalikan komponen, HOC dapat digabungkan dengan cara menumpuknya. Terapkan pembungkus terluar terakhir.

const Enhanced = withLogging(withUser(BaseTable));

Pemeriksaan Singkat

Agar pembungkus HOC bersifat transparan, apa yang harus diteruskannya ke komponen yang dibungkus?

Jawab di pelajaran interaktif

Ringkasan

HOC seperti withLogging(Wrapped) mengembalikan defineComponent baru yang setup-nya merender komponen yang dibungkus dengan h(Wrapped, attrs, slots), sambil menambahkan perilaku lintas fitur seperti pencatatan log atau properti yang disuntikkan. Teruskan atribut dan slot agar tetap transparan, dan pilih komposabel jika Anda hanya perlu membagikan logika.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Komponen Orde Tinggi (HOC)” gratis?

Ya — teks lengkap “Pola Komponen Orde Tinggi (HOC)” 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 “Pola Komponen Orde Tinggi (HOC)”?

Membungkus komponen dengan HOC, meneruskan props dan slot, serta menentukan kapan memakai HOC dibandingkan composable. 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 4 dari 4.

Berapa lama pelajaran “Pola Komponen Orde Tinggi (HOC)” 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

← Kembali ke Vue Academy