Nesting Components (Modularity)
In the previous chapter, we learned how to initialize, build, and debug a simple Vue application. In this chapter, you will discover how to modularize a Vue application using component hierarchies and nesting. This chapter introduces concepts such as props, events, prop validation, and slots. It also covers how to use refs to access DOM elements during runtime.
By the end of this chapter, you will be able to define communication interfaces between components using props, events, and validators, and be ready to build components for your Vue component library or a Vue application.
This chapter covers the following topics:
- Passing props
- Understanding prop types and validation
- Understanding slots, named slots, and scoped slots
- Understanding Vue refs
- Using events for child-parent communication