如何将数组从父组件传递给子组件 Vue 3.0？

Question

我有一个示例 Vue 3.0 项目，其中几乎没有以 app.vue 作为父组件的子组件。我想将数组从 app.vue 组件传递到接受数组但无法这样做的列表产品组件。代码如下

错误：在挂载 list-product 组件时，我正在记录来自 app.vue 的输入提供的数组，结果是一个字符串并且类型检查失败。

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>

列表-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

您应该使用 v-bind: 或 shorthand 语法绑定它 : :

<ListProduct :products="products" />

如何将数组从父组件传递给子组件 Vue 3.0？

How to pass on the array from parent component to chid component Vue 3.0?

javascript

vue.js

vue-component

vuejs2

vuejs3