Composing components in Vue.js

Last Updated: January 16, 2018

In this tutorial, let’s see how we can compose the components in Vue.js. I have the product-table component and inside the product-table, I have the product-row component

I am using following root element and the product-table

This has the “products” prop

Next I have the product-table component inside the script tag

Vue.component('product-table', {
        template: '
\
                    \
                        \
                    \
                    \
                    
\
                        Product Name Unit Price 
 
',
        props:['products']
  })

Next you can define the product-row component

Vue.component('product-row', {
        template: '\
                       {{product.name}}\
                       {{product.price}} \
                    ',
        props:['product']
  })

Finally our Vue instance

new Vue({
      el: "#root",
      data: {
          active : true,
          street : '23, 2nd Lane',
          productlist : [{name:'Coca-Cola',price:'1.00'},{name:'Sprite',price:'1.10'}]
          
      }
      
    })
Test