Using components in your own components

We are talking about composition. Composition is a basic principle in software engineering that allows you to build big and complex systems out of small and self-contained pieces. The working is not exoteric but is similar to playing with Legos.

Getting ready

Before venturing in composition, you should be able to create components in the first place. Go to the Creating and registering a component recipe if you need a refresher. Since this recipe uses props, you should also complete the Passing data to your components with props recipe to be on track.

How to do it...

We will build a menu for a restaurant. We will have a component for the complete course, and it will contain a smaller component for the individual dishes.

We will first go bottom-up by writing the component for every dish:

Vue.component('dish', { 
   template: ` 
     <p class="dish"> 
       {{ham}} &lt;- Delicious! 
     </p> 
   `, 
   props: ['ham'] 
 })

The < part...