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: '', props:['products'] })\
\ Product Name \Unit Price \ \\
Next you can define the product-row
component
Vue.component('product-row', { template: '\ ', props:['product'] }){{product.name}} \{{product.price}} \
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'}] } })