面试题：Vue中插槽的基本使用场景有哪些

Question

请举例说明在Vue组件化开发中，插槽（Slot）常见的使用场景，并简单描述如何实现这些场景下的插槽应用。

Answer 1

常见使用场景及实现方式

1. 默认插槽
   • 场景：在组件内部预留一个区域，让使用者可以插入自定义内容。例如一个基础的 Dialog 组件，除了组件自身的标题、关闭按钮等固定部分，中间显示内容部分需要由使用者自定义。
   • 实现： 在组件模板中定义插槽：

<template>
  <div class="dialog">
    <h2>标题</h2>
    <slot>这里是默认内容，如果使用者没有传入内容，会显示此默认内容</slot>
    <button>关闭</button>
  </div>
</template>

使用组件时传入内容：

<Dialog>
  <p>这是自定义的对话框内容</p>
</Dialog>

2. 具名插槽
   • 场景：当组件中有多个预留区域，需要区分不同区域插入不同内容时使用。比如一个 Layout 组件，有 header、main、footer 等不同区域，每个区域需要插入不同的自定义内容。
   • 实现： 在组件模板中定义具名插槽：

<template>
  <div class="layout">
    <slot name="header">默认的头部内容</slot>
    <slot name="main">默认的主体内容</slot>
    <slot name="footer">默认的底部内容</slot>
  </div>
</template>

使用组件时传入对应具名插槽的内容：

<Layout>
  <template v-slot:header>
    <h1>自定义头部</h1>
  </template>
  <template v-slot:main>
    <p>自定义主体内容</p>
  </template>
  <template v-slot:footer>
    <p>自定义底部内容</p>
  </template>
</Layout>

3. 作用域插槽
   • 场景：当插槽内容需要依赖于子组件的数据时使用。例如一个 List 组件展示列表数据，列表项的具体展示方式希望由使用者自定义，但又要用到列表项的数据。
   • 实现： 在组件模板中定义作用域插槽并传递数据：

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      <slot :item="item">{{ item.name }}</slot>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' }
      ]
    };
  }
};
</script>

使用组件时接收插槽传递的数据并自定义展示：

<List>
  <template v-slot:default="slotProps">
    <span>{{ slotProps.item.name }} - 自定义展示</span>
  </template>
</List>