面试题：Vue中默认插槽在列表渲染场景下的用法

Question

假设你要开发一个商品列表组件，每个商品项除了固定展示的名称、价格外，还需要根据不同商品展示一些额外信息，如电子产品可能有型号，服装可能有尺码等。请用Vue默认插槽实现该功能，描述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 创建一个商品列表组件，在组件模板中定义固定展示的商品名称和价格部分。
2. 使用Vue的默认插槽，在商品列表组件模板中预留位置，用于插入不同商品的额外信息。
3. 在使用商品列表组件时，通过插槽传入不同商品对应的额外信息。

关键代码示例

商品列表组件（ProductList.vue）

<template>
  <div>
    <div v-for="product in products" :key="product.id">
      <h3>{{ product.name }}</h3>
      <p>价格: {{ product.price }}</p>
      <slot :product="product"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '手机', price: 3000, type: '电子产品', model: 'iPhone 14' },
        { id: 2, name: 'T恤', price: 100, type: '服装', size: 'L' }
      ]
    };
  }
};
</script>

使用商品列表组件（App.vue）

<template>
  <div id="app">
    <ProductList>
      <template v-slot:default="slotProps">
        <div v-if="slotProps.product.type === '电子产品'">
          型号: {{ slotProps.product.model }}
        </div>
        <div v-if="slotProps.product.type === '服装'">
          尺码: {{ slotProps.product.size }}
        </div>
      </template>
    </ProductList>
  </div>
</template>

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

export default {
  components: {
    ProductList
  }
};
</script>