面试题：Vue中如何利用Fragment结合Slot实现简单的列表项内容分发

Question

假设有一个列表组件，每个列表项可能包含不同的图标和文本内容。请使用Vue的Fragment结合Slot功能实现该列表组件，要求能灵活地为每个列表项分发图标和文本。简要描述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 创建一个Vue组件作为列表组件。
2. 在列表组件模板中使用<template v-for>来循环渲染列表项。
3. 利用Vue的Fragment（<template>标签）包裹列表项内容，使列表项结构更简洁。
4. 通过具名插槽来分别接收每个列表项的图标和文本内容，从而实现灵活分发。

关键代码示例

<template>
  <ul>
    <template v-for="(item, index) in listData" :key="index">
      <li>
        <template v-if="$slots.icon">
          <slot name="icon" :item="item"></slot>
        </template>
        <template v-if="$slots.text">
          <slot name="text" :item="item"></slot>
        </template>
      </li>
    </template>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        // 列表数据
      ]
    };
  }
};
</script>

在使用该组件时：

<template>
  <MyListComponent>
    <template v-for="(item, index) in listData" :key="index">
      <template v-slot:icon="{ item }">
        <!-- 图标内容，例如 <i class="icon-{{item.iconClass}}"></i> -->
      </template>
      <template v-slot:text="{ item }">
        <!-- 文本内容，例如 {{item.text}} -->
      </template>
    </template>
  </MyListComponent>
</template>

<script>
import MyListComponent from './MyListComponent.vue';

export default {
  components: {
    MyListComponent
  },
  data() {
    return {
      listData: [
        { iconClass: 'home', text: '首页' },
        { iconClass: 'user', text: '用户' }
      ]
    };
  }
};
</script>