Cara Menggunakan Kembali Komponen Vue Dengan Slot
Table of content:
Vue menawarkan berbagai cara agar komponen dapat berkomunikasi satu sama lain. Komunikasi ini dapat terjadi antara dua komponen yang tidak terkait, atau antara komponen induk dan anak. Vue mencapai ini dengan fitur termasuk props, provide/inject, dan slot.
Cari tahu cara menggunakan slot untuk memungkinkan komponen induk dan anak berkomunikasi di aplikasi Vue Anda.
Baca Juga:
Apa itu Slot?
Slot di Vue bertindak sebagai placeholder di dalam template komponen anak. Placeholder ini memungkinkan Anda meneruskan konten dari komponen induk ke komponen anak secara dinamis.
Mirip dengan prop yang meneruskan data dan fungsi dari komponen induk ke anak, slot memungkinkan Anda meneruskan konten template dari komponen induk ke anak. Ini memungkinkan Anda membuat lebih banyak komponen yang dapat digunakan kembali dengan konten HTML yang berbeda.
Sintaks Dasar Slot
Vue terkenal dengan kemampuannya untuk menyempurnakan HTML dengan tag khusus yang memungkinkan Anda membuat aplikasi web yang fleksibel dengan cepat. Slot tidak terkecuali. Di Vue, tag slot unik memungkinkan Anda mengatur placeholder di komponen turunan untuk menyuntikkan konten HTML.
Untuk menentukan slot di dalam komponen anak Vue, gunakan elemen di dalam templat komponen. Pertimbangkan contoh dasar ini:
<template>
<div>
<slot></slot>
</div>
</template>
Contoh ini menampilkan komponen Vue sederhana yang berisi satu slot. Anda dapat meneruskan konten ke dalam slot di komponen anak ini dari komponen induk. Konten ini akan menggantikan elemen slot ketika Vue merender komponen anak.
Untuk menggunakan slot, teruskan konten ke komponen turunan dari komponen induk:
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script><template>
<ChildComponent>
<h1>This is the child component</h1>
</ChildComponent>
<div>
<h3>This is the parent component</h3>
</div>
</template>
Blok kode di atas mewakili komponen induk yang mengimpor dan menggunakan komponen anak dari sebelumnya. Komponen anak menerima pesan “Ini adalah komponen anak” di dalam h1 beri tag dan ganti placeholder dengan pesan ini.
Slot memungkinkan Anda menentukan struktur tata letak dan menyusun komponen kompleks dengan menempatkannya di blok konten yang berbeda. Ini sangat bermanfaat saat Anda membuat komponen UI yang dapat digunakan kembali atau membuat tata letak dengan bagian yang dapat dipertukarkan.
Beri Nama Slot Anda untuk Menggunakan Lebih dari Satu
Saat Anda bekerja dengan komponen yang berbeda, Anda mungkin perlu menentukan lebih dari satu slot pada anak. Ini mungkin karena komponen anak Anda dapat memiliki bagian yang berbeda seperti header dan footer atau judul dan badan kartu.
Vue memungkinkan Anda menentukan slot dengan nama untuk mereferensikan slot tertentu saat mengirimkan konten dari komponen induk.
Misalnya:
<template>
<div class="card">
<div class="card-title">
<slot name="title"></slot>
</div> <div class="card-body">
<slot name="body"></slot>
</div>
</div>
</template>
<style>
.card {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
}
.card-title {
font-weight: bold;
margin-bottom: 10px;
}
.card-body {
margin-bottom: 10px;
}
</style>
Blok kode di atas menggambarkan komponen anak yang mewakili kartu. Komponen kartu ini mendefinisikan dua slot dengan dua nama atribut: judul Dan tubuh. Anda dapat mereferensikan salah satu dari slot ini dan meneruskan konten ke slot tersebut satu per satu.
Untuk meneruskan konten ke slot bernama, gunakan v-slot direktif dalam komponen induk:
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script><template>
<div>
<ChildComponent>
<template v-slot:title>
<h2>This is the Card Title</h2>
</template>
<template v-slot:body>
<p>This is the Card Body Content.</p>
<p>It can include multiple paragraphs or any other HTML content.</p>
</template>
</ChildComponent>
</div>
</template>
Komponen induk ini menggunakan komponen turunan dan meneruskan konten untuk judul dan isi kartu. Vue menyuntikkan konten di dalam blok template ke dalam slot yang sesuai di komponen turunan.
Seperti arahan lain di Vue, seperti v-untuk direktif untuk rendering daftar, Anda harus melampirkan v-slot direktif ke tag HTML. Anda biasanya harus melampirkannya ke a templat menandai.
Seperti direktif Vue lainnya, v-slot memiliki singkatan: simbol #.
<template #title>
<h2>This is the Card Title</h2>
</template>
Konten Default untuk Slot
Anda dapat menentukan slot dengan konten default yang akan ditampilkan saat Anda tidak menurunkan apa pun dari komponen induk. Anda dapat mencapai ini hanya dengan menempatkan konten di dalam slot elemen.
Misalnya:
<template>
<div>
<slot>
<p>Default content for the slot.</p>
</slot>
</div>
</template>
Dalam contoh ini, jika komponen induk tidak menyediakan konten apa pun untuk slot, Vue akan menyetel konten HTML ke konten dalam komponen anak.
Cara Menggunakan Scoped Slots
Scoped slot memungkinkan Anda menggunakan data dari komponen turunan saat menyuntikkan konten HTML dari komponen induk. Ini sangat berguna saat Anda perlu merender data yang Anda tentukan di komponen anak.
Berikut adalah contoh bagaimana Anda dapat menggunakan slot bercakupan:
<script setup>
import { ref } from "vue";const value = ref("David");
const age = ref(21);
</script>
<template>
<div>
<slot :value="value" :age="age"> </slot>
</div>
</template>
Komponen anak ini mendefinisikan dua variabel: a nilaimewakili nama, dan an usia, mewakili angka. Contoh kemudian menentukan sebuah slot dan meneruskan kedua variabel ini, serupa dengan cara Anda menggunakan prop saat membuat komponen Vue.
Anda sekarang dapat mengakses variabel-variabel ini dari komponen induk dengan melampirkan direktif v-slot ke tag komponen anak:
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script><template>
<div>
<ChildComponent v-slot="slotProps">
{{ slotProps.value }} is {{ slotProps.age }} years old.
</ChildComponent>
</div>
</template>
Itu v-slot petunjuk yang melekat pada Komponen Anak tag memungkinkan komponen induk ini menerima data dari komponen anak dan menggunakannya dalam konten slot. Itu slotProps objek mewakili data bersama.
Di dalam konten slot, {{slotProps.nilai }} Dan {{slotProps.age }} menampilkan data yang dibagikan dengan interpolasi, sebuah teknik untuk mengikat data di Vue.
Saat bekerja dengan slot bernama, lampirkan v-slot direktif ke a templat menandai. Misalnya:
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script><template>
<div>
<ChildComponent>
<template #title="titleProps">
<h2>{{ titleProps.title }}</h2>
</template>
<template #body="bodyProps">
<p>{{ bodyProps.body }}</p>
</template>
</ChildComponent>
</div>
</template>
Blok kode di atas menjelaskan penggunaan komponen induk dari komponen anak. Komponen induk melampirkan v-slot direktif ke dua templat tag, menggunakan singkatan untuk penamaan. Itu v-slot arahan memungkinkan komponen induk untuk menggunakan data dari komponen anak saat merender konten HTML.
Sekarang, pertimbangkan komponen anak yang digunakan komponen induk dalam blok kode di bawah ini:
<script setup>
import { ref } from "vue";
const cardTitle = ref("This is the card title.");
const cardBody = ref("This is the card body content.");
</script><template>
<div class="card">
<div class="card-title">
<slot name="title" :title="cardTitle"></slot>
</div>
<div class="card-body">
<slot name="body" :body="cardBody"></slot>
</div>
</div>
</template>
Komponen anak ini menggunakan slot bernama untuk membedakannya. Vue mencadangkan atribut nama sebagai pengidentifikasi unik untuk tag slot. Komponen anak meneruskan atribut title dan body ke komponen induk.
Slot Bukan Satu-Satunya Fitur Komponen Vue
Slot adalah fitur canggih di Vue yang memungkinkan Anda membuat komponen yang dapat digunakan kembali dengan konten yang dapat disesuaikan. Dengan memahami sintaks dan penggunaan slot, Anda dapat membangun aplikasi Vue.js yang lebih fleksibel dan modular.
Vue menyediakan fitur komponen lainnya, seperti composables dan props untuk komunikasi komponen. Sebagai pengembang Vue, Anda perlu memiliki pengetahuan lanjutan tentang fitur-fitur ini.
Artikel Terkait
