vue 的 solt 子组件过滤过程解析

Vue 中的 Slot 是一种非常有用的机制，可以让我们在组件内部定义一些占位符，然后在组件的使用者里面填充具体的内容。Slot 过滤是在填充内容时，可以根据组件中的一些条件特意选择一个 Slot 进行填充，也可以不填充。

要实现 Slot 过滤，我们需要使用 Vue 中的 v-slot 指令，并使用 name 属性为 Slot 指定名称，如下：

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在父组件中可以指定 Slot 需要填充的内容和是否需要过滤。

假设我们需要根据条件动态展示不同的内容，我们可以在父组件模板中添加如下代码：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:header>
      <!-- 过滤条件满足时，展示该内容 -->
      <h1>Header</h1>
    </template>

    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
      <!-- 过滤条件满足时，展示该内容 -->
      <template v-slot:footer>
        <h1>Footer</h1>
      </template>
    </ul>
  </ChildComponent>
</template>

在这个例子中，我们使用 v-slot 指令为 Slot 指定名称，然后在 template 标签中填充需要展示的内容，如 footer 中的 <h1>Footer</h1>。当需要过滤时，使用 v-if 或 v-show 指令判断是否需要展示该 Slot。

下面再结合一个实际案例，来详细讲解 Slot 过滤的过程。

假设我们有一个 TodoList 组件，该组件可以展示待办事项列表，并且可以根据状态进行过滤（all：全部，active：未完成，completed：已完成）。我们可以在该组件中定义三个 Slot，用于分别展示不同状态的待办事项。组件定义如下：

<!-- TodoList.vue -->
<template>
  <div>
    <slot name="all"></slot>
    <slot name="active"></slot>
    <slot name="completed"></slot>
  </div>
</template>

在父组件中，我们可以根据状态来填充不同的内容，并使用 v-if 指令来控制只填充一个对应状态的 Slot。父组件代码如下：

<!-- ParentComponent.vue -->
<template>
  <TodoList>
    <template v-if="currentFilter === 'all'" v-slot:all>
      <ul>
        <li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
      </ul>
    </template>

    <template v-if="currentFilter === 'active'" v-slot:active>
      <ul>
        <li v-for="todo in todos.filter((item) => !item.completed)" :key="todo.id">{{ todo.title }}</li>
      </ul>
    </template>

    <template v-if="currentFilter === 'completed'" v-slot:completed>
      <ul>
        <li v-for="todo in todos.filter((item) => item.completed)" :key="todo.id">{{ todo.title }}</li>
      </ul>
    </template>
  </TodoList>
</template>

<script>
export default {
  data() {
    return {
      currentFilter: 'all', // 当前过滤状态
      todos: [] // 待办事项列表
    }
  }
  // ...
}
</script>

在这个案例中，我们只展示与当前状态对应的 Slot，其他 Slot 不进行填充。这样，就实现了一个根据状态过滤的 TodoList 组件。