title: how to pass array of different values as props in vue
body: <p>everyone I hope everyone is doing great. I'm new to vue.js and was learning prop's which is pretty intersting. The thing is I want to pass an array as props and want to display it in the child component. here is my code
  <strong>parent component</strong></p>
  <pre><code>    &lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;showProduct :product=&quot;['products']&quot;/&gt;  
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import showProduct from './components/showProduct.vue'
  
  export default {
    name: 'App',
    components: {
      showProduct
    },
    data(){
      return{
          products:[
            {productid:&quot;01&quot;,productname:&quot;t shirt&quot;,price:&quot;50$&quot;,description:&quot;a good description&quot;},
            {productid:&quot;02&quot;,productname:&quot;jeans pant&quot;,price:&quot;150$&quot;,description:&quot;a good description of jeans&quot;},
            {productid:&quot;02&quot;,productname:&quot;leather jacker&quot;,price:&quot;250$&quot;,description:&quot;a good description of jacket&quot;},
          ],
  }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>where as the <strong>child component</strong> code is given below</p>
  <pre><code>    &lt;template&gt;
     &lt;h1&gt;{{product}}&lt;/h1&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name:'showProduct', 
    props:[
     'product'
    ],
    methods:{
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>now I want to do the following:</p>
  <ul>
  <li>Pass just a single element for instance product id as a 'props'.</li>
  <li>Pass the whole array of products and display it in child components.</li>
  </ul>
  <p>Any hint and suggestion will be welcomed.</p>