Vue Academy · Pelajaran

Membuat dan Mendaftarkan Komponen

Definisikan dan daftarkan komponen secara global maupun lokal.

Membuat dan Mendaftarkan Komponen adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. 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 3 pelajaran total.

Mengapa Komponen?

Komponen memungkinkan Anda memisahkan UI menjadi bagian-bagian independen yang dapat digunakan kembali.

Masing-masing mengelola templat, logika, dan gayanya sendiri
Anda menyusunnya menjadi struktur yang lebih besar
Komponen membuat kode lebih teratur dan mudah dipelihara

Komponen Satu Berkas

Komponen Satu Berkas (.vue) menggabungkan tiga blok dalam satu berkas.

<template>
  <p>{{ greeting }}</p>
</template>

<script setup>
import { ref } from "vue"
const greeting = ref("Hello!")
</script>

<style scoped>
p { color: teal; }
</style>

Mendefinisikan Komponen

Blok template adalah markup. Blok script berisi logika. Blok style berisi CSS.

Gaya scoped hanya berlaku untuk komponen ini
Templat memerlukan struktur elemen yang jelas

Nama Komponen

Sesuai konvensi, berkas komponen dan penggunaannya menggunakan PascalCase.

Berkas: UserCard.vue
Dalam templat: <UserCard />
PascalCase membedakan komponen dari HTML bawaan

Mengimpor Komponen

Untuk menggunakan komponen, impor komponen tersebut di tempat Anda memerlukannya.

<script setup>
import UserCard from "./components/UserCard.vue"
</script>

<template>
  <UserCard />
</template>

Pendaftaran Lokal (script setup)

Dengan script setup, cukup impor komponen agar komponen tersebut tersedia di templat. Tidak diperlukan langkah pendaftaran tambahan.

<script setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</script>

<template>
  <Header />
  <main>Content</main>
  <Footer />
</template>

Pendaftaran Lokal (Options API)

Dengan Options API, Anda mendaftarkan komponen dalam opsi components.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

Pendaftaran Global

Pendaftaran global dengan app.component membuat komponen dapat digunakan di mana saja tanpa impor.

import { createApp } from "vue"
import App from "./App.vue"
import BaseButton from "./components/BaseButton.vue"

const app = createApp(App)
app.component("BaseButton", BaseButton)
app.mount("#app")

Global vs Lokal

Memilih cakupan pendaftaran:

Global lebih praktis, tetapi memperbesar bundel dan menyulitkan pelacakan penggunaan
Lokal menggunakan impor yang eksplisit, penghapusan pohon yang lebih baik, dan dependensi yang lebih jelas

Utamakan pendaftaran lokal, kecuali untuk beberapa komponen dasar yang benar-benar universal.

Menggunakan Kembali Komponen

Komponen yang sama dapat digunakan berkali-kali. Setiap instans bersifat independen.

<template>
  <UserCard />
  <UserCard />
  <UserCard />
</template>

<!-- three separate instances,
     each with its own state -->

Menyarangkan Komponen

Komponen membentuk sebuah pohon. Induk dapat berisi anak, yang juga dapat berisi anaknya sendiri.

<!-- App.vue -->
<template>
  <PageLayout>
    <ArticleList />
  </PageLayout>
</template>

<!-- ArticleList contains ArticleCard children -->

Pemeriksaan Singkat

Uji pemahaman Anda tentang pendaftaran komponen.

Ringkasan: Membuat Komponen

Anda telah mempelajari cara membuat dan mendaftarkan komponen:

Berkas .vue berisi templat, skrip, dan gaya
Gunakan nama PascalCase
script setup secara otomatis mendaftarkan komponen yang diimpor
Options API menggunakan opsi components
app.component() mendaftarkan komponen secara global

Berikutnya: props dan peristiwa khusus.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat dan Mendaftarkan Komponen” gratis?

Ya — teks lengkap “Membuat dan Mendaftarkan Komponen” 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 3 pelajaran total.

Apa yang akan aku pelajari di “Membuat dan Mendaftarkan Komponen”?

Definisikan dan daftarkan komponen secara global maupun lokal. 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 3.

Berapa lama pelajaran “Membuat dan Mendaftarkan Komponen” 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

Membuat dan Mendaftarkan Komponen
Props dan Event Kustom
Slot dan Slot Berscope

← Kembali ke Vue Academy