Chapter 6. Working with components
This chapter covers
- Understanding parent and child relationships in components
- Learning about local and global registration
- Using props and prop validation
- Adding custom events
In the previous chapters, we learned about conditionals, looping, and lists. Instead of repeating code, we used loops to simplify things. We used conditionals to show different messages depending on the user action. This works, but you may have noticed that our application has grown to more than 300 lines of code. The index.html file we’ve been updating every chapter has computed properties, filters, methods, lifecycle hooks, and data properties in it. With all this information, it’s not easy finding things.
To help solve this, we need to separate our code and componentize it. Each part of the code should be reusable and allow properties and events to be passed to it.
Vue.js components can help us accomplish this. Before we begin, let’s look at several of the fundamentals of components and a few examples of how they work. Then we’ll look at local and global registration of components. Afterward, we’ll see a few examples on how to pass props and how to validate them. We’ll end the chapter with defining our templates and custom events.
You maybe be wondering what happened to our pet store application. Don’t worry, we’ll look at this in the next chapter when we look at single-file components, build tools, and Vue-CLI.