Functional Components

Functional components are a subset of regular Vue.js components. They do not have state or a component instance. They can be thought of as render functions (as shown earlier in this chapter) to which props are passed.

Note

We can mark components as functional, which means that they are stateless (no reactive data) and instance-less (no this context).

See the Vue.js documentation for more (https://vuejs.org/v2/guide/render-function.html#Functional-Components).

Functional components can only access props, children, slots, and scoped slots, as passed from their parent component. They also receive references to parents and listeners.

The following is a Greet component (in the Greet.vue file). Note the functional annotation in template:

<template functional>
  <div>Functional Component: {{ props.greeting }} {{     props.audience }}</div>
</template>

Functional components must access props through props.propName...