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}} <- Delicious! </p> `, props: ['ham'] })
The < part is an HTML entity and means "less than"; it will be displayed as the < symbol.
The course component will have the dish component inside it, and we will add some validation for the prop, just to ensure that all the menus have a similar layout:
Vue.component('course', { template: ` <section class="course"> <dish v-for="ham in menu" :ham="ham" :key="ham"></dish> </section> `, ...
