如何将数组从父组件传递到chid组件Vue 3.0？

Question

I have a sample Vue 3.0 project where, I have few child components with app.vue as parent component. I want to pass an array from app.vue component to list-product component which accepts an array but unable to do so. Code is as follows.

Error: On mount of list-product component, I am logging the input provided array from app.vue which turned out be a string and type check failed.

Stackbliz Link

app.vue

<template>
  <Navbar title="FirstCry" />
  <div class="row mt-3">
    <div class="col-md-4 p-3 border bordered shadow-sm">
      <Addproduct />
    </div>
    <div class="col-md-8">
      <ListProduct products={{products}} />
    </div>
  </div>
  <ViewProduct />
</template>

<script>

import Navbar from "./components/Navbar.vue";
import Addproduct from "./components/Addproduct.vue";
import ListProduct from "./components/list-product.vue";
import ViewProduct from "./components/View-Product.vue";

export default {
  name: "App",
  components: {
    Navbar,
    Addproduct,
    ListProduct,
    ViewProduct,
  },
  data() {
    return {
      products: [
        {
        name: "Iphone",
        price: "22000",
        image: "https://i.imgur.com/J9yBaqj.jpg",
        }
      ]
    }
  }
};
</script>

<style>
</style>

list-products.vue

<template>
 <div class="row">
   <div class="col-md-4 product" >

            <div class="card">
                <div style="overflow: hidden;" class="card-header p-0">
                    <img class="card-img-top img-fluid" src='https://i.imgur.com/J9yBaqj.jpg' alt="Card image cap" style="height: 300;">
                </div>

                <div class="card-body">
                    <center><h5 class="card-title">Iphone</h5></center>
                    <p class="card-text text-secondary">
                    <!-- {{products[0].name}} -->
                    </p>
                    <center><h4>
                        <small>
                            <s class="text-secondary">
                                22
                            </s>
                        </small>
                        <span class="price">22</span>
                    </h4>
                    <a  class="btn btn-warning ng-star-inserted" style="margin: 20px;">Add to Cart</a>
                    <a  class="btn btn-primary">Buy Now</a></center>
                </div>
            </div>

        </div>
 </div>
</template>

<script>
export default {
  name: "ListProduct",
  props: {
    title: String,
    products: Array
  },
  mounted() {
   console.log(this.products);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.product {
    margin-top: 10px;
}

.img-fluid:hover {
    transform: scale(1.2);
    overflow: hidden;
}
small {
    font-size: 80%;
    font-weight: 400;
}

.text-secondary {
    color: #6c757d !important;
}

s {
    text-decoration: line-through;
}

</style>

Answer 1

You should bind it using v-bind: or the shorthand syntax : :

<ListProduct :products="products" />