Here I explain to you what functional components are and when to use them

Functional components in Vue

April 02, 2020
1 Minute

What are functional components?

Functional components in Vue are components that do not have any watchers, computed properties or methods. The only purpose of those components is to render the content given to them by props.


In vue 2.5.0+ a functional component in a single-file component can be defined as follows:


Everything that the functional component needs is passed to it by a context object containing:

  • props: An object of the provided props
  • children: An array of the VNode children
  • slots: A function returning a slots object
  • scopedSlots: (2.6.0+) An object that exposes passed-in scoped slots. Also exposes normal slots as functions.
  • data: The entire data object, passed to the component as the 2nd argument of createElement
  • parent: A reference to the parent component
  • listeners: (2.3.0+) An object containing parent-registered event listeners. This is an alias to data.on
  • injections: (2.3.0+) if using the inject option, this will contain resolved injections.


Because there is no need for lifecycle methods, state and reactive data there can be a huge performace benefit for using functional components.

If you want to learn more about functional components click here

Open for offers

Looking for a Developer? Contact me through my website and I will get back to you as soon as possible.