I recently completed Udemy courses on Vue and Nuxt.js.
I decided to test this framework to build a Vaccine Tracker. Having a background in React, learning was smooth and natural.
An incredibly versatile element is the slot. From the first moment I wondered how they could be used for the construction of complex and at the same time versatile layouts. For example a Tabs component.
Tabs component implementation
As props it is sufficient that it receives a list of all the tabs to display.
In the state it is sufficient to keep track of the activated tab.
Finally, we need a method that is triggered when clicked on a different tab.
<script>
import Vue from 'vue'
export default Vue.extend({
props: {
labels: {
type: Array,
require: true,
},
},
data() {
return {
activeLabel: this.$props.labels[0],
}
},
methods: {
onLabelClick(label) {
this.activeLabel = label
},
},
})
</script>
So far (syntax aside) nothing different from any other framework. However, the magic happens in the template:
<template>
<div>
<div v-for="label in labels" :key="label" @click="onLabelClick(label)">
{{ label }}
</div>
<slot :name="activeLabel">Default {{ activeLabel }}</slot>
</div>
</template>
That's all. One iteration to show each tab. Below is a slot whose name
is updating when one of the tabs is clicked.
For the purposes of this post I ignore the style. You can get fancy!
Tabs component usage
Wherever you want to use this component just do as follows:
<Tabs :labels="['one', 'two', 'three']">
test
<template #one>
<div>Uno</div>
</template>
<template #two>
<div>Due</div>
</template>
<template #three>
<div>Tre</div>
</template>
</Tabs>
Of the different templates, only the one relating to the active tab will be shown.
It's amazing how so few lines can lead to such versatile behavior.
Thanks for reading,
Repo 📑
Top comments (0)