You don't need to look far before noticing component-driven architecture in modern web applications nowadays. Development needs have changed in a short space of time with the web going from a simple document viewer to hosting complex applications with significantly large code bases. Therefore, the ability to create reusable components makes our lives as front-end developers much easier as we can encapsulate core functionality into singular blocks, reducing overall complexity, allowing for better separation of concerns, collaboration, and scalability.
In this chapter, we'll be taking the preceding concepts and applying them to our Vue applications. By the end of this chapter, you will have achieved:
- The ability to create your own Vue components
- A greater understanding of Single File Components
- The ability to create styles specific to each component
- The ability to register components both locally and globally, and an understanding of why to select one over the other
- The ability to communicate between parent and child components using props
- The ability to communicate across the application using a global Event Bus
- The ability to use slots to make your components more flexible
Let's start off by looking at Your first Vue component.