怎么使用Vue.js创建一个包含商品列表的组件

你可以使用Vue.js的组件化特性来创建一个包含商品列表的组件。首先，你需要定义一个Vue组件来渲染商品列表。示例代码如下：

<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
      <li v-for="product in products" :key="product.id">{{product.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  props: {
    title: String,
    products: Array
  }
}
</script>

在这个组件中，我们定义了一个props属性来接受从父组件传入的商品列表数据。然后我们使用v-for指令来渲染商品列表。

在父组件中，你可以通过import语句来引入ProductList组件，然后在模板中使用它。示例代码如下：

<template>
  <div>
    <ProductList :title="'Today\'s Deals'" :products="products"/>
  </div>
</template>

<script>
import ProductList from './ProductList.vue'

export default {
  name: 'App',
  components: {
    ProductList
  },
  data() {
    return {
      products: [
        {id: 1, name: 'Product 1'},
        {id: 2, name: 'Product 2'},
        {id: 3, name: 'Product 3'},
      ]
    }
  }
}
</script>

在这个示例中，我们将ProductList组件作为子组件添加到父组件中，并通过props属性传递了商品列表数据。注意，在传递字符串类型的属性值时，需要使用单引号或双引号将其括起来。

希望这个例子能帮助你了解如何使用Vue.js创建包含商品列表的组件。