Javascript 如何将阵列从父组件传递到chid组件Vue 3.0？

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

错误：在装载列表产品组件时，我正在记录app.vue中提供的输入数组，结果是字符串，类型检查失败

app.vue

从./components/Navbar.vue导入导航栏； 从./components/Addproduct.vue导入Addproduct； 从./components/list-product.vue导入ListProduct； 从./components/View-Product.vue导入ViewProduct； 导出默认值{ 名称:App,， 组成部分：{ 导航栏， Addproduct， 列表产品， ViewProduct， }, 资料{ 返回{ 产品：[ { 名称：Iphone， 价格：22000， 图片：https://i.imgur.com/J9yBaqj.jpg, } ] } } }; list-products.vue

苹果手机

22 22 添加到购物车 立即购买 导出默认值{ 名称：ListProduct， 道具：{ 标题：字符串， 产品:阵列 }, 安装{ console.logthis.products； } }; .产品{ 边缘顶部：10px； } .img流体：悬停{ 转换：scale1.2； 溢出：隐藏； } 小的{ 字号：80%； 字体大小：400； } .文字中学{ 颜色：6c757d！重要； } { 文字装饰：线条贯通； } 您应该使用v-bind:或速记语法进行绑定：

您应该使用v-bind:或速记语法进行绑定：

<ListProduct :products="products" />