Vue 中如何使用 slot 和 scoped slot？

在 Vue.js 中，slot 和 scoped slot 是实现组件内容分发和灵活布局的重要特性。它们允许开发者在子组件中插入父组件的内容，从而提高组件的复用性和灵活性。本文将详细探讨 slot 和 scoped slot 的使用方法、应用场景及其最佳实践。

1. Slot 的基本概念

1.1 什么是 Slot

slot 是 Vue 提供的一个功能，允许父组件在子组件中插入内容。它使得组件的结构更加灵活，可以根据需要渲染不同的内容。

1.2 基本用法

在子组件中使用 <slot> 标签来定义插槽位置。在父组件中使用子组件时，可以在子组件标签内放置内容，这些内容会被插入到子组件的 <slot> 位置。

示例

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <p>This content will be inserted into the child component.</p>
    </ChildComponent>
  </div>
</template>

在这个示例中，<p> 标签的内容将被插入到 ChildComponent 的 <slot> 标签中。

1.3 默认插槽和具名插槽

默认插槽

默认插槽是最基本的插槽用法，如上所示。它不需要命名，可以在子组件中只使用一个 <slot> 标签。

具名插槽

具名插槽允许你定义多个插槽，并给它们命名。父组件可以指定要插入哪个具名插槽。

示例

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <slot name="header"></slot> <!-- 具名插槽 -->
    <slot></slot> <!-- 默认插槽 -->
    <slot name="footer"></slot> <!-- 具名插槽 -->
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>This is the header</h1>
      </template>
      <p>This is the default slot content.</p>
      <template v-slot:footer>
        <p>This is the footer.</p>
      </template>
    </ChildComponent>
  </div>
</template>

在这个示例中，ChildComponent 具有一个具名插槽 header 和 footer，父组件可以为这些插槽提供内容。

2. Scoped Slot 的概念

2.1 什么是 Scoped Slot

scoped slot 是一种特殊类型的插槽，它允许子组件将数据传递回父组件。通过 scoped slot，父组件可以访问子组件内部的数据，实现更灵活的内容渲染。

2.2 Scoped Slot 的基本用法

在子组件中，使用 v-slot 指令定义 scoped slot，并传递要共享的数据。父组件可以通过插槽的作用域访问这些数据。

示例

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <slot :message="greeting"></slot> <!-- 共享数据 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello from Child Component!',
    };
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:default="slotProps">
        <p>{{ slotProps.message }}</p> <!-- 使用共享数据 -->
      </template>
    </ChildComponent>
  </div>
</template>

在这个示例中，ChildComponent 通过 slot 共享了 greeting 数据，父组件可以通过 slotProps 来访问这个数据并进行渲染。

3. Scoped Slot 的高级用法

3.1 多个 Scoped Slot

一个组件可以定义多个 scoped slot，父组件可以根据需要选择性地使用这些插槽。

示例

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <slot name="header" :message="headerMessage"></slot>
    <slot name="body" :content="bodyContent"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerMessage: 'This is the header message!',
      bodyContent: 'This is the body content.',
    };
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:header="slotProps">
        <h1>{{ slotProps.message }}</h1>
      </template>
      <template v-slot:body="slotProps">
        <p>{{ slotProps.content }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

在这个示例中，ChildComponent 定义了 header 和 body 两个 scoped slot，父组件能够分别访问和使用它们。

3.2 传递多个数据

可以通过 scoped slot 传递多个数据对象，父组件可以接收并使用这些数据。

示例

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <slot :header="headerData" :body="bodyData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerData: { title: 'Header Title', subtitle: 'Header Subtitle' },
      bodyData: { text: 'This is the body text.' },
    };
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:default="slotProps">
        <h1>{{ slotProps.header.title }}</h1>
        <h2>{{ slotProps.header.subtitle }}</h2>
        <p>{{ slotProps.body.text }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

在这个示例中，ChildComponent 通过 scoped slot 传递了 headerData 和 bodyData，父组件可以分别访问这些数据。

4. 使用 Slot 的注意事项

4.1 插槽内容的渲染顺序

插槽内容的渲染顺序与其在父组件中的书写顺序相同。确保在父组件中按照需要的顺序书写插槽内容。

4.2 作用域的限制

在 scoped slot 中，父组件不能直接访问子组件的数据，必须通过插槽的作用域来访问。

4.3 插槽的动态性

插槽内容可以是动态的，父组件可以根据状态变化来改变插槽内容。

5. Slot 和 Scoped Slot 的应用场景

5.1 重用组件

通过使用插槽，开发者可以创建高度可复用的组件，允许在不同上下文中插入不同的内容。

5.2 动态布局

使用插槽和 scoped slot 可以实现动态布局，根据用户的交互或数据变化来动态渲染内容。

5.3 复杂组件结构

在构建复杂的用户界面时，插槽和 scoped slot 可以帮助分离组件的结构和内容，使得组件更易于管理和维护。

6. 实际案例分析

6.1 创建可复用的卡片组件

使用插槽创建一个可复用的卡片组件，允许不同的内容插入。

<!-- Card.vue -->
<template>
  <div class="card">
    <slot name="header"></slot>
    <div class="card-body">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<style>
.card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
}
.card-body {
  margin: 16px 0;
}
</style>

<!-- ParentComponent.vue -->
<template>
  <div>
    <Card>
      <template v-slot:header>
        <h2>Card Title</h2>
      </template>
      <p>This is the main content of the card.</p>
      <template v-slot:footer>
        <button>Click Me!</button>
      </template>
    </Card>
  </div>
</template>

在这个示例中，Card 组件允许父组件插入不同的内容到头部、主体和底部。

6.2 使用 Scoped Slot 实现表格

使用 scoped slot 创建一个动态表格组件，允许父组件自定义表格的行内容。

<!-- Table.vue -->
<template>
  <table>
    <thead>
      <tr>
        <slot name="header"></slot>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <slot name="row" :item="item"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    items: Array,
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <Table :items="data">
      <template v-slot:header>
        <th>Name</th>
        <th>Age</th>
      </template>
      <template v-slot:row="slotProps">
        <td>{{ slotProps.item.name }}</td>
        <td>{{ slotProps.item.age }}</td>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
    };
  },
};
</script>

在这个示例中，Table 组件允许父组件自定义表头和每一行的内容。

7. 小结

• Slot 和 Scoped Slot 是 Vue.js 中实现内容分发和灵活布局的重要特性。
• 使用插槽可以创建可复用的组件，提高代码的可维护性和灵活性。
• Scoped slot 允许子组件将数据传递回父组件，提供更大的灵活性和控制。
• 理解插槽的工作原理和最佳实践，可以帮助开发者构建更复杂和动态的用户界面。