Cara menggunakan scoped slots di Vue

Slot cakupan di Vue memungkinkan komponen anak mengirimkan data kembali ke konten slot induk, menciptakan pola template yang kuat di mana komponen anak menyediakan data untuk logika rendering yang ditentukan induk. Pendekatan paling efektif adalah menggunakan props slot untuk mengirim data dari anak ke induk dengan arahan template v-slot untuk konsumsi yang bersih. Metode ini menyediakan komposisi komponen dengan aliran data dari anak ke induk dan pola rendering yang sangat dapat disesuaikan.

Gunakan props slot untuk mengirim data dari komponen anak ke konten slot induk dengan arahan template v-slot.

<!-- Komponen Anak: UserList -->
<template>
 <div class="user-list">
 <h3>Pengguna</h3>
 <div v-for="user in users" :key="user" class="user-item">
 <slot name="user" :user="user" :isActive="user === 'active'" :actions="{ edit: editUser, delete: deleteUser }">
 <div>{{ user }} - {{ user }}</div>
 </slot>
 </div>
 <slot name="summary" :totalUsers="users" :activeUsers="activeUsersCount">
 <p>Total: {{ users }} pengguna</p>
 </slot>
 </div>
</template>
<script setup>
import { ref, computed } from 'vue'
const users = ref([
 { id: 1, name: 'John Doe', email: 'john@example', status: 'active' },
 { id: 2, name: 'Jane Smith', email: 'jane@example', status: 'inactive' }
])
const activeUsersCount = computed(() => value(user => user === 'active').length)
const editUser = (user) => { console('Mengedit pengguna:', user) }
const deleteUser = (user) => { users = value(u => u !== user) }
</script>
<!-- Komponen Induk -->
<template>
 <div>
 <UserList>
 <template #user="{ user, isActive, actions }">
 <div class="custom-user-card" :class="{ active: isActive }">
 <img :src="`/avatars/${user}.jpg`" :alt="user">
 <div class="user-info">
 <h4>{{ user }}</h4>
 <p>{{ user }}</p>
 <span v-if="isActive" class="status-badge">Aktif</span>
 </div>
 <div class="user-actions">
 <button @click="actions(user)">Edit</button>
 <button @click="actions(user)">Hapus</button>
 </div>
 </div>
 </template>
 <template #summary="{ totalUsers, activeUsers }">
 <div class="summary-card">
 <h4>Statistik Pengguna</h4>
 <p>Total Pengguna: {{ totalUsers }}</p>
 <p>Pengguna Aktif: {{ activeUsers }}</p>
 <p>Pengguna Tidak Aktif: {{ totalUsers - activeUsers }}</p>
 </div>
 </template>
 </UserList>
 </div>
</template>

Slot cakupan mengirim data dari anak ke induk menggunakan props slot dalam definisi slot. Komponen induk mengakses data ini menggunakan template v-slot dengan sintaks destructuring. Ini memungkinkan komponen anak menyediakan data sementara komponen induk mengontrol logika rendering, menciptakan pola komponen yang kuat dan fleksibel.

▲ Kembali ke atas

Platform Lainnya

Berita Piala Dunia

Jika Anda memiliki pertanyaan, silakan kirim email ke [email protected]

▲ Kembali ke atas