Introduction
Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this post, I am covering two, bit more advanced topics of the slots. One of them is conditional slots. I called it conditional, but that is not the best way to call it. What I mean here is checking if the slot template is defined. The second one is scoped slots. Scoped slots are important because sometimes you want to pass some data to the slot. For that, you need to use scoped slots.
Initial component
A great example we can use for scoped and conditional slots is a list. Lists are quite a common requirement in UI development. Depending on the use case, we would render different list items differently. Let’s start by defining this starter list component that will in its basic version just accept the list of items we want to render.
<template>
<ul>
<li v-for="item in listItems" :key="item.id">List item</li>
</ul>
</template>
<script>
export default {
props: ["items"],
computed: {
listItems() {
return this.$props.items;
}
},
data() {
return {}
}
}
</script>Items I am using in this example are quite simple, they contain the id, title, and description property. As I…
