Pengantar Komponen Vue

Pengantar

Saat mengembangkan aplikasi besar, selalu merupakan ide bagus untuk memecahnya menjadi komponen yang lebih kecil agar kode lebih mudah dibaca, disusun, dan dipelihara. Sebagian besar pemula Vue memahami komponen apa yang setidaknya secara konseptual, tetapi mereka mungkin tidak memahami apa yang dapat dan tidak dapat mereka lakukan sepenuhnya.

Dalam panduan ini, kita akan melihat apa itu komponen di Vue, cara kerjanya, cara meneruskan data dan peristiwa melaluinya, dan banyak lagi.

Apa itu Komponen Vue?

Komponen adalah instance elemen Vue yang dapat digunakan kembali yang menyertakan template, gaya, dan elemen JavaScript. Setiap komponen adalah "miliknya sendiri", mirip dengan bagaimana setiap elemen HTML adalah "miliknya sendiri", dan baik komponen Vue maupun elemen HTML memungkinkan kita untuk menggunakannya sebagai blok penyusun halaman web.

Anda dapat menganggap komponen Vue sebagai elemen HTML yang diilhami JavaScript, yang dapat Anda definisikan dan manipulasi sendiri.

Aplikasi Vue pada umumnya terdiri dari banyak komponen yang dapat digunakan kembali sebanyak yang diperlukan.

Misalnya, situs web biasa memiliki bagian yang muncul di semua halaman – navbar, header, footer, dan sebagainya. Oleh karena itu, dianggap sebagai praktik yang baik untuk menjadikan masing-masing komponen terpisah. Dengan begitu, kami membuat kode yang terstruktur dengan baik, mudah dibaca, dapat digunakan kembali, dan mudah dipelihara:

Cara Membuat Komponen Vue

Ada dua cara dasar untuk membuat komponen Vue, tergantung bagaimana proyek kita dibuat – dengan atau tanpa pengaturan build. Dalam kasus pertama, setiap komponen disimpan dalam file terpisah. Dalam kasus kedua, mungkin ada banyak komponen dalam satu file.

Buat Komponen Vue Dengan Build Setup

Sebagian besar proyek dibuat menggunakan membangun pengaturan, yang memungkinkan kita membuat Komponen Berkas Tunggal (SFC) – file komponen khusus dengan .vue perpanjangan. Ini memungkinkan kita untuk mengenkapsulasi templat, logika, dan gaya komponen Vue dalam satu file:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Buat Komponen Vue Tanpa Build Setup

Jika Anda, karena alasan apa pun, tidak dapat menggunakan pengelola paket seperti npm untuk menginstal Vue di mesin Anda, Anda masih dapat menggunakan Vue di aplikasi Anda. Sebuah alternatif untuk bangunan Vue menggunakan npm adalah menginstal Vue melalui a CDN (Jaringan Pengiriman Konten) langsung di aplikasi Anda. Mari kita segera membahas cara membuat komponen Vue ini.

Menginstal Vue tanpa build akan memungkinkan kita menggunakan fungsionalitas khusus Vue seperti yang kita lakukan dengan JavaScript biasa. Sintaksnya agak mirip dengan apa yang telah kita lihat di SFC biasa:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

Dalam panduan ini, kita akan menggunakan Sintaks SFC, karena itu adalah metode pembuatan komponen yang paling umum digunakan.

Cara Mendaftar Komponen di Vue

Sejauh ini, kita telah melihat cara membuat komponen di Vue. Langkah selanjutnya adalah menggunakan komponen ini di dalam komponen lain (hierarki orangtua-anak).

Untuk melakukannya, pertama-tama kita harus mendaftarkan komponen yang ingin kita gunakan. Pendaftaran ini memerlukan mengimpor dan kemudian mendaftarkan komponen. Ada dua opsi untuk melakukannya - global dan pendaftaran lokal.

Komponen Vue – Registrasi Global

Komponen yang terdaftar secara global, seperti namanya, tersedia secara global, yang artinya komponen tersebut dapat digunakan di semua komponen aplikasi kita tanpa kita harus mengimpornya lagi. Hal ini dilakukan dengan mendaftarkan komponen menggunakan app.component() Metode:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

Dalam situasi di mana kita memiliki banyak komponen, kita bisa rantai mereka dengan cara ini:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

Setelah kami mendaftarkan komponen kami, kami dapat menggunakannya dalam template komponen apa pun dalam aplikasi ini menggunakan sintaks berikut:

<ChildComponent/>
<ProfileComponent/>

Komponen Vue – Registrasi Lokal

Kami akan menggunakan pendaftaran lokal dalam banyak kasus karena ini memungkinkan kami untuk membatasi ketersediaan komponen terdaftar kami. Mengimpor komponen ini dan kemudian menambahkannya ke components opsi menyelesaikan ini:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

Saat memberi nama komponen, gunakan UntaKasus untuk memperjelas bahwa ini adalah komponen Vue, bukan elemen HTML asli dalam template. Ini juga memudahkan untuk mengimpor dan mendaftarkan komponen dalam JavaScript.

Cara Mengirim Data Melalui Komponen Vue

Salah satu manfaat membuat komponen adalah kemampuan untuk menggunakan kembali kode dengan membuatnya menjadi modular.

Asumsikan kita sedang membuat komponen profil pengguna yang perlu menerima data setiap siswa dari halaman profil; dalam hal ini, kita harus meneruskan data ini dari komponen profil (komponen induk) ke komponen profil pengguna (komponen anak), dan kita akan menggunakan alat peraga.

alat peraga

Props adalah atribut khusus yang dapat kita daftarkan pada suatu komponen, sehingga kita dapat meneruskan data dari komponen induk ke komponen anak menggunakan props opsi dalam tag skrip:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

slot

Slot Vue adalah ruang khusus yang memungkinkan kita untuk meneruskan semua jenis konten dari satu komponen ke komponen lainnya. Ini memberikan kontrol yang lebih terpusat daripada prop karena, tidak seperti prop, komponen induk mengontrol konten di dalam komponen anak. Misalnya, kita dapat membuat tombol berikut:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Kemudian kita dapat menggunakan komponen ini dimanapun kita mau dan memberikannya konten yang kita inginkan. Kegagalan untuk memberikan konten berarti akan menggunakan nilai default yang kami berikan (Klik Saya):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Cara Memancarkan Acara dari Komponen Vue

Kita mengetahui bahwa props digunakan untuk mengirimkan data dari komponen induk ke komponen anak. Tapi kita mungkin bertanya-tanya apakah ada cara untuk mengirimkan sesuatu dari komponen anak ke komponen induk. Dan jawabannya adalah iya nih, acara juga dapat dikirim dari komponen anak ke komponen induk.

Asumsikan kita memiliki komponen induk (App.vue) yang berisi komponen anak tunggal (MyBlogPost.vue). Selanjutnya, komponen anak berisi tombol yang seharusnya mengubah judul.

Asumsikan kita ingin mengubah judul halaman kita ketika sebuah tombol diklik, sehingga sebuah fungsi terpicu:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

Dan komponen anak akan terlihat seperti ini:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Kesimpulan

Dalam panduan ini, kita telah mempelajari cara bekerja dengan komponen di Vue, yang sangat penting bagi siapa pun yang menggunakan Vue. Kami juga mempelajari cara mengirim dan menerima data, serta cara memancarkan peristiwa.

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://stackabuse.com/introduction-to-vue-components/