vue3商品多规格显示组件

在 Vue 3 中，可以通过使用 Slots 和 Props 来创建一个商品多规格显示组件。下面是一个可能的实现：

首先，在父组件中，定义商品规格的数据：

data() {
  return {
    product: {
      name: '商品1',
      specs: [
        { label: '颜色', options: ['红色', '蓝色'] },
        { label: '尺寸', options: ['S', 'M', 'L'] }
      ]
    },
    selectedSpecs: {}
  }
}

然后，在父组件的模板中，使用子组件，并将商品规格数据传递给子组件：

<template>
  <div>
    <product-specs :specs="product.specs" :selectedSpecs="selectedSpecs" @select-specs="onSelectSpecs"></product-specs>
  </div>
</template>

其中，`product.specs` 是商品规格数据，`selectedSpecs` 是用户选择的规格数据，`onSelectSpecs` 是当用户选择规格时触发的回调函数。

接下来，我们来创建子组件 `ProductSpecs`。在子组件中，使用 `v-for` 指令来循环遍历商品规格数据，生成一个规格选择器：

<template>
  <div>
    <div v-for="(spec, index) in specs" :key="index">
      <h3>{{ spec.label }}</h3>
      <div>
        <span v-for="(option, i) in spec.options" :key="i" @click="selectOption(index, option)"
              :class="{ 'selected': selectedSpecs[index] === option }">{{ option }}</span>
      </div>
    </div>
  </div>
</template>

其中，`spec` 是当前规格对象，`index` 是当前规格对象在数组中的索引。使用 `v-for` 指令循环遍历规格数据，并生成一个 `h3` 标题以及一组规格选项。

在规格选项中，使用 `v-for` 指令循环遍历选项数据，并生成一个 `span` 元素。当用户点击选项时，触发 `selectOption` 方法，并将选项的索引和值作为参数传递给该方法。

最后，在子组件的 `script` 中，定义 `selectOption` 方法和 `emits`，用于向父组件发送用户选择的规格数据：

props: {
  specs: { type: Array, required: true },
  selectedSpecs: { type: Object, required: true }
},
methods: {
  selectOption(index, option) {
    this.$set(this.selectedSpecs, index, option)
    this.$emit('select-specs', this.selectedSpecs)
  }
},
emits: ['select-specs']

其中，`$set` 方法用于动态添加或修改对象的属性，`$emit` 方法用于向父组件发送事件，并将用户选择的规格数据作为参数传递给该事件。

最终，我们就创建了一个基于 Vue 3 的商品多规格显示组件。