8.3 自定义组件的插槽

在Vue.js框架中，组件的插槽（Slots）是一种强大的功能，它允许我们定义组件的模板结构时，保留一些区域让父组件来填充具体内容。这种机制极大地增强了组件的复用性和灵活性，使得组件能够更好地适应不同的使用场景。在TypeScript与Vue结合的开发环境中，了解并熟练掌握插槽的使用对于构建高质量、可维护的应用程序至关重要。本章将深入探讨Vue中自定义组件插槽的概念、类型、作用域插槽以及如何在TypeScript中定义和使用它们。

8.3.1 插槽基础

Vue中的插槽主要分为匿名插槽（默认插槽）和具名插槽两种。在TypeScript环境下使用Vue时，这些基本概念保持不变，但类型定义可能会稍微复杂一些，因为我们需要确保类型安全。

匿名插槽（默认插槽）

匿名插槽是最简单的插槽形式，它不接受名字，是组件模板中的默认内容填充区域。在子组件中，使用<slot></slot>标签定义插槽位置；在父组件中，则通过模板内容直接填充该插槽。

<!-- 子组件 BaseButton.vue -->
<template>
  <button>
    <slot>默认按钮文本</slot>
  </button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'BaseButton'
});
</script>
<!-- 父组件 -->
<template>
  <BaseButton>点击我</BaseButton>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import BaseButton from './BaseButton.vue';
export default defineComponent({
  components: {
    BaseButton
  }
});
</script>

在上面的例子中，<BaseButton>组件的按钮内文本被父组件通过模板内容替换成了“点击我”。

具名插槽

当组件需要多个插槽时，可以使用具名插槽。具名插槽通过name属性来区分不同的插槽。

<!-- 子组件 Layout.vue -->
<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 匿名插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Layout'
});
</script>
<!-- 父组件 -->
<template>
  <Layout>
    <template v-slot:header>
      <h1>网站标题</h1>
    </template>
    <p>页面主要内容</p>
    <template v-slot:footer>
      <p>版权信息</p>
    </template>
  </Layout>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Layout from './Layout.vue';
export default defineComponent({
  components: {
    Layout
  }
});
</script>

在这个例子中，Layout组件定义了三个插槽：一个匿名插槽和两个具名插槽（header和footer）。父组件通过v-slot:插槽名（或简写为#插槽名）的方式将内容分配给对应的插槽。

8.3.2 作用域插槽

作用域插槽是一种特殊类型的插槽，它允许子组件将数据“暴露”给插槽内容。这样，父组件就可以在插槽模板中访问并展示这些数据。

<!-- 子组件 TodoList.vue -->
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <slot name="todo" :todo="todo">
        {{ todo.text }} <!-- 默认内容 -->
      </slot>
    </li>
  </ul>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
interface Todo {
  id: number;
  text: string;
}
export default defineComponent({
  name: 'TodoList',
  props: {
    todos: {
      type: Array as PropType<Todo[]>,
      required: true
    }
  }
});
</script>
<!-- 父组件 -->
<template>
  <TodoList :todos="todos">
    <template v-slot:todo="{ todo }">
      <span v-if="todo.completed" style="text-decoration: line-through;">
        {{ todo.text }}
      </span>
      <span v-else>
        {{ todo.text }}
      </span>
    </template>
  </TodoList>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import TodoList from './TodoList.vue';
export default defineComponent({
  components: {
    TodoList
  },
  setup() {
    const todos = ref([
      { id: 1, text: '学习TypeScript', completed: false },
      { id: 2, text: '编写Vue组件', completed: true }
    ]);
    return { todos };
  }
});
</script>

在这个例子中，TodoList组件通过具名插槽todo向父组件暴露每个todo对象。父组件在插槽模板中接收这个对象，并根据todo.completed的值决定如何显示文本。

8.3.3 TypeScript中的类型定义

在TypeScript与Vue结合使用时，确保类型安全是非常重要的。对于插槽，尤其是作用域插槽，我们需要为传递给插槽的数据定义明确的类型。

在子组件中，可以通过在<slot>标签上使用:propName="value"的形式暴露数据，并在模板或<script setup>中通过TypeScript接口或类型别名定义这些数据的类型。在父组件中，通过v-slot:插槽名="slotProps"接收数据时，可以通过TypeScript的类型注解来确保slotProps的类型安全。

<!-- 子组件 -->
<template>
  <slot name="custom" :user="user"></slot>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
interface User {
  name: string;
  age: number;
}
export default defineComponent({
  name: 'ChildComponent',
  setup() {
    const user: User = { name: 'Alice', age: 30 };
    return { user };
  }
});
</script>
<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:custom="{ user }">
      <div>
        Name: {{ user.name }}, Age: {{ user.age }}
      </div>
    </template>
  </ChildComponent>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default defineComponent({
  components: {
    ChildComponent
  }
});
</script>

在这个例子中，子组件ChildComponent通过作用域插槽向父组件传递了一个user对象，该对象具有明确的User类型。父组件在接收这个对象时，通过类型注解确保了user的类型安全。

总结

Vue中的插槽是一种非常强大的功能，它允许我们构建高度灵活和可复用的组件。在TypeScript环境下使用Vue时，通过为插槽及其传递的数据定义明确的类型，我们可以进一步提高代码的可读性和可维护性。通过掌握匿名插槽、具名插槽以及作用域插槽的使用，我们可以在Vue项目中实现更加复杂和动态的组件交互。希望本章的内容能够帮助你更好地理解Vue中的插槽机制，并在TypeScript环境下高效地使用它们。