Vuejs Slot Kullanımı

Vuejs kullanırken, componentin tüm içeriğinin dinamik olarak değiştirilmesi yada belirli bir bölümünün değişmesi durumunda slotları kullanırız.

Tüm içeriğin dinamik olarak değiştiği duruma bir örnek;

Card adında bir component oluşturalım ve bu card componentimizin temel css yazıp kalan içeriği dışarıdan alalım.

src/components/Card.vue adında bir component oluşturalım.

<template>
<div class="card">
<slot />
</div>
</template>
<script>
export default {
name: "Card",
};
</script>
<style scoped>
.card {
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 40%;
padding: 20px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
</style>

src/app.vue dosyamızda card componentimizi kullanalım ve içeriğini biz dolduralım.

<template>
<div id="app">
<Card>
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</Card>
</div>
</template>
<script>
import Card from "./components/Card";
export default {
name: "App",
components: {
Card,
},
};
</script>

Yazmış olduğumuz Card componentinin gövdesinin dışarıdan dolacağını belirttik şimdi sırada aynı componentin belirli yerlerini dolduralım.

İsimlendirilmiş içeriğin dinamik olarak değiştiği duruma bir örnek;

src/components/Card.vue içeriğini aşağıdaki gibi güncelliyoruz.

<template>
<div class="card">
<div class="cardHeader">
<slot name="cardHeader"></slot>
</div>
<slot></slot>
<div class="cardFooter">
<slot name="cardFooter"></slot>
</div>
</div>
</template>
<script>
export default {
name: "Card",
};
</script>
<style scoped>
.cardFooter {
display: flex;
}
.cardHeader {
display: flex;
}
.card {
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 40%;
padding: 20px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
</style>

src/app.vue dosyamızda card componentimizi kullanalım ve içeriğini biz dolduralım.

<template>
<div id="app">
<Card>
<template v-slot:cardHeader>
<h1>Kart Başlığı</h1>
</template>
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
<template v-slot:cardFooter>
<h4>Kart Footer</h4>
</template>
</Card>
</div>
</template>
<script>
import Card from "./components/Card";
export default {
name: "App",
components: {
Card,
},
};
</script>

Herkese İyi Çalışmalar Dilerim. :)