**Course Title:** Mastering Vue.js: Building Modern Web Applications **Section Title:** Vue Components and Props **Topic:** Build a component-based application that displays a list of items, using props to pass data between components.(Lab topic) Welcome to this lab topic, where we'll put our knowledge of Vue components and props into practice. In this exercise, we'll build a simple application that displays a list of items, demonstrating how to pass data between components using props. **Objective:** By the end of this lab, you'll be able to: 1. Create a component that displays a list of items 2. Use props to pass data from a parent component to a child component 3. Understand how to use props to display dynamic data in a child component **Step 1: Create a new Vue project** If you haven't already, create a new Vue project using the Vue CLI by running the following command in your terminal: ```bash vue create my-list-app ``` This will create a new Vue project with the basic setup for our application. **Step 2: Create a parent component** In the `src/components` directory, create a new file called `ListParent.vue`. This will be our parent component. ```html // src/components/ListParent.vue <template> <div> <h1>My List App</h1> <ListChild v-for="item in items" :key="item.id" :item="item" /> </div> </template> <script> import ListChild from './ListChild.vue' export default { name: 'ListParent', components: { ListChild }, data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ] } } } </script> ``` In this code, we're creating a parent component that displays a list of items. We're using the `v-for` directive to loop over an array of items and render a child component (`ListChild`) for each item. **Step 3: Create a child component** In the `src/components` directory, create a new file called `ListChild.vue`. This will be our child component. ```html // src/components/ListChild.vue <template> <div> <h2>{{ item.name }}</h2> </div> </template> <script> export default { name: 'ListChild', props: { item: Object } } </script> ``` In this code, we're creating a child component that displays the name of an item. We're using a prop called `item` to receive the item data from the parent component. **Step 4: Pass data from parent to child** In the `ListParent` component, we're already passing the item data to the `ListChild` component using the `:item` prop. We're also using the `:key` shorthand to set the `key` prop on the `ListChild` component. ```html <ListChild v-for="item in items" :key="item.id" :item="item" /> ``` This is shorthand for: ```html <ListChild v-for="item in items" v-bind:key="item.id" v-bind:item="item" /> ``` **Step 5: Run the application** Finally, let's run our application by opening the `main.js` file and adding the following code: ```javascript // src/main.js import Vue from 'vue' import App from './App.vue' import ListParent from './components/ListParent.vue' Vue.component('ListParent', ListParent) new Vue({ render: (h) => h(App) }).$mount('#app') ``` Now we can run our application by opening the `index.html` file in the browser or by running the command `npm run serve` in the terminal. **Conclusion:** In this lab topic, we've built a simple application that displays a list of items using props to pass data between components. We've created a parent component that displays a list of items and a child component that displays the name of an item. We've also learned how to use props to display dynamic data in a child component. **Key Takeaways:** * Props are used to pass data from a parent component to a child component. * The `v-for` directive is used to loop over an array of items and render a child component for each item. * The `:key` shorthand is used to set the `key` prop on a child component. * The `v-bind` directive is used to bind a prop to a value. **Additional Resources:** * Vue.js documentation: [Props](https://vuejs.org/v2/guide/components-props.html) * Vue.js documentation: [v-for](https://vuejs.org/v2/guide/list.html#v-for) **Leave a comment or ask for help:** If you have any questions or need help with this lab topic, please leave a comment below. We'll be happy to help you troubleshoot any issues or provide additional guidance. In the next topic, we'll learn how to use built-in directives (v-if, v-for, v-bind, v-model) to conditionally render elements, loop over arrays, and bind data to form elements.