如何在Vue中向子组件传递数组或单个属性作为props

问题代码修正说明 #

你原有父组件传值存在语法错误：:product="['products']" 实际传递的是包含字符串'products'的字面量数组，并非data中定义的products数组，修改时去掉方括号和引号即可直接绑定data变量。 #

需求1：仅传递单个属性（以productid为例） #

实现思路 #

如果需要传递单条商品的id，可直接指定数组下标取对应商品的productid属性传值；如果需要批量传递所有商品的id，可通过v-for遍历数组逐个传递。

父组件代码示例 #

<template>
  <div id="app">
    <!-- 传递单条商品的productid -->
    <showProduct :product-id="products[0].productid"/>
    <!-- 遍历所有商品，逐个传递对应productid -->
    <showProduct 
      v-for="item in products" 
      :key="item.productid" 
      :product-id="item.productid"
    />
  </div>
</template>

<script>
import showProduct from './components/showProduct.vue'

export default {
  name: 'App',
  components: {
    showProduct
  },
  data(){
    return{
      products:[
        {productid:"01",productname:"t shirt",price:"50$",description:"a good description"},
        {productid:"02",productname:"jeans pant",price:"150$",description:"a good description of jeans"},
        {productid:"03",productname:"leather jacket",price:"250$",description:"a good description of jacket"},
      ],
    }
  }
}
</script>

子组件代码示例 #

<template>
  <h1>商品ID：{{ productId }}</h1>
</template>

<script>
export default {
  name:'showProduct', 
  props:{
    // 定义props类型，增强代码健壮性
    productId: {
      type: String,
      required: true
    }
  }
}
</script>

需求2：传递完整products数组并在子组件展示 #

实现思路 #

直接将完整的products数组绑定到子组件props，子组件接收后通过v-for遍历数组渲染所有商品信息即可。

父组件代码示例 #

<template>
  <div id="app">
    <showProduct :product-list="products"/>
  </div>
</template>

<script>
import showProduct from './components/showProduct.vue'

export default {
  name: 'App',
  components: {
    showProduct
  },
  data(){
    return{
      products:[
        {productid:"01",productname:"t shirt",price:"50$",description:"a good description"},
        {productid:"02",productname:"jeans pant",price:"150$",description:"a good description of jeans"},
        {productid:"03",productname:"leather jacket",price:"250$",description:"a good description of jacket"},
      ],
    }
  }
}
</script>

子组件代码示例 #

<template>
  <div class="product-list">
    <div v-for="item in productList" :key="item.productid" class="product-item">
      <p>商品ID：{{ item.productid }}</p>
      <p>商品名称：{{ item.productname }}</p>
      <p>商品价格：{{ item.price }}</p>
      <p>商品描述：{{ item.description }}</p>
      <hr>
    </div>
  </div>
</template>

<script>
export default {
  name:'showProduct', 
  props:{
    productList: {
      type: Array,
      required: true,
      // 定义数组默认值
      default: () => []
    }
  }
}
</script>

补充说明 #

props定义时建议使用对象写法指定类型、是否必填、默认值，可提前捕获类型错误，提升代码可维护性。

内容的提问来源于stack exchange，提问作者Muhammad Khan