Functional components in Vue are a type of component that is essentially stateless. There is no Vue instance, only a context object that gets passed into the component. This means that there is very little overhead. Functional components can be used anywhere that a component doesn't require it's own reactive data or methods. An example of a functional component is below:
<template functional>
<figure :class="props.type" v-on:click="listeners.click">
<img :src="props.src" />
<figcaption v-if="slots().default">
<span><slot></slot></span>
</figcaption>
<div class="tags" v-if="props.tags && props.type != 'framed'">
<span v-for="tag in props.tags"> {{ tag }}</span>
</div>
</figure>
</template>
<script>
export default {
name: 'FigureFunctionalSFC',
props: {
src: {
required: true,
type: String
},
type: {
required: true,
type: String
},
tags: {
required: false,
type: Array
}
}
}
</script>
More info here: