Dalam pengembangan aplikasi dengan teknologi Vue.js, slot adalah sebuah konsep yang memungkinkan kita untuk me- inject komponen-komponen lain ke dalam suatu komponen induk. Dalam artikel ini, kita akan membahas bagaimana cara mengatur slot dan memanipulasi elemen-elemen childnya.

Menggunakan Slot dalam Komponen

Misalnya, kita memiliki sebuah komponen FancyList yang memiliki slot bernama checkAnswer. Kita dapat menggunakan slot tersebut untuk menambahkan konten ke dalam komponen induk. Berikut adalah contoh kode dari komponen FancyList:

<template>
 <div class="w-[70%] mx-[15%] flex items-center justify-center">
 <button
 :class="{
 'text-gray-300 border-gray-300': isAnswerChecked,
 }"
 @click="checkAnswer"
 >
 <slot name="checkAnswer">Check answer</slot>
 </button>
 </div>
</template>

<script setup>
import { ref } from 'vue';

const isAnswerChecked = ref(false);
</script>

Dalam contoh di atas, kita menggunakan slot checkAnswer untuk menampilkan sebuah tombol yang dapat diklik. Kita juga menggunakan atribut :class untuk mengubah tampilan tombol berdasarkan nilai isAnswerChecked.

Menghapus Elemen Child

Sekarang, kita ingin memanipulasi elemen child yang diinject melalui slot. Misalnya, kita ingin menghapus tombol tersebut ketika tombol tersebut diklik. Berikut adalah contoh kode dari komponen induk App:

<template>
 <FancyList @click="isAnswerChecked = true">
 <template #checkAnswer>
 Check answer carefully
 </template>
 </FancyList>
</template>

<script setup>
import { ref } from 'vue';
import FancyList from './FancyList.vue';

const isAnswerChecked = ref(false);
</script>

Dalam contoh di atas, kita menggunakan atribut @click untuk mengubah nilai isAnswerChecked ketika tombol tersebut diklik. Kita juga menggunakan slot checkAnswer untuk menampilkan konten ke dalam komponen induk.

Solusi

Jika kita ingin menghapus elemen child yang diinject melalui slot, kita dapat menggunakan konsep inheritAttrs: false dan $attrs. Berikut adalah contoh kode dari komponen FancyList:

<script>
export default {
 inheritAttrs: false,
};
</script>

<template>
 <div :class="{$attrs.class}" @click="$emit('click')">
 <button>
 <slot name="checkAnswer">Check answer</slot>
 </button>
 </div>
</template>

Dalam contoh di atas, kita menggunakan atribut inheritAttrs: false untuk menghentikan automatic inheritance of attributes ke dalam komponen induk. Kita juga menggunakan $attrs untuk mengakses atribut-atribut child yang diinject melalui slot. Dengan demikian, kita dapat memanipulasi elemen child tersebut dengan lebih baik.

Dalam artikel ini, kita membahas bagaimana cara mengatur slot dan memanipulasi elemen-elemen childnya dalam pengembangan aplikasi Vue.js. Kita juga membahas konsep inheritAttrs: false dan $attrs untuk memungkinkan kita memanipulasi elemen child dengan lebih baik.