Renderless Components and Inheritance
Explore the concept of renderless components in VueJS, including how they differ from standard components and their use without templates. Understand inheritance and lifecycle hook behaviors while practicing abstraction and reuse of logic through renderless components and mixins. This lesson helps you create cleaner and more flexible code by leveraging advanced Vue patterns.
A component doesn’t necessarily need a template. Not needing a template can be helpful for several reasons. Maybe we need a simple validator component that wraps all the form fields with listeners, but we don’t want it to add an extra <div> around them. Maybe we have some abstract definition of a form field that cannot be rendered as a single template but offers some methods and data. Or perhaps we want to abstract some logic away in general.
The key difference between a standard component and a renderless component is that a renderless component lacks a template and lacks any style. While a .vue file offers all of these, a renderless component only offers the script part and doesn’t need to be a .vue file. A .js file can be a Vue component too.
One could say that a renderless component is the most basic version of a component, whereas a normal .vue component is an enhanced version.
Defining renderless components
A renderless component is defined in a single ...