Building a Vue application is like putting a puzzle together. Each piece of the puzzle is a component, and each piece has a slot to fill.
Components play a big part in Vue development. In Vue, each part of your code will be a component – it could be a layout, a page, a container, or a button, but ultimately, it's a component. Learning how to interact with them and reuse them is the key to cleaning up code and performance in your Vue application. Components are the code that will, in the end, render something on the screen, whatever its size might be.
In this chapter, we will learn about how to make a visual component that can be reused in many places. We'll use slots to place data inside our components, create functional components for seriously fast rendering, implement direct communication between parent and child components, and look at loading our components asynchronously.
Then, we'll put all those pieces together and create a beautiful puzzle that's also a Vue application.
In this chapter, we'll cover the following recipes:
- Creating a visual template component
- Using slots and named slots to place data inside your components
- Passing data to your component and validating the data
- Creating functional components
- Accessing your children component's data
- Creating a dynamic injected component
- Creating a dependency injection component
- Creating a mixin component
- Lazy loading your components
Let's get started!
