Composing components in Vue.js

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'}]
          
      }
      
    })