In this tutorial, we will study how to work with nested components in Vue.js application development.
If you want to create a new project you can follow these steps. In your terminal, run the followng code
|
1 |
npm install -g vue-cli |
This will install the vue-cli globally. Then you can create vue project by running following command
|
1 |
vue init webpack-simple myproject |
In this totorial we will create component ProductRow and we will add it to the ProductTable
I will create ProductRow.vue file in the src folder. I will add following code to that file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <tr> <td> {{product.name}} </td> <td> {{product.price}}</td> </tr> </template> <script> export default{ name:"product-row", props: ["product"] } </script> |
This is a table row and you have the prop name product comming from the higher level component ProductTable
You can create new file under src folder and name it ProductTable.vue and add the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template> <div> <table> <th> <td> Product Name </td> <td> Unit Price </td> </th> <product-row v-for="product in products" :product="product" > </product-row> </table> </div> </template> <script> import ProductRow from "./ProductRow.vue" export default { name:"product-table", data () { return { msg: 'My Product Table' } }, components:{ "product-row":ProductRow }, props:["products"] } </script> |
Here, you have the product-row which imported from the ProductRow.vue file
Finally, you can add the following code to App.vue file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <product-table :products="productlist" > </product-table> </template> <script> import ProductTable from "./ProductTable.vue" export default { name: 'app', data () { return { productlist : [{name:'Coca-Cola',price:'1.00'},{name:'Sprite',price:'1.10'}] } }, components:{ "product-table":ProductTable } } </script> |