13

1. 前言

本小节我们将介绍如何使用插槽slot，包括默认插槽、具名插槽、作用域插槽。插槽可以使组件的模版变得多样性，让用户在使用组件时可以自定义传入模版内容。在复杂组件中，当我们在使用多个插槽的时候将会是一个难点。但是也不必担心，只要我们将每个插槽类型的使用方法学透，相信面对任何复杂插槽的使用的时候都可以游刃有余。

2. 慕课解释

Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口。 —— 官方定义

<slot>元素作为承载分发内容的出口，可以理解为一个占位符，或者说是子组件暴露的一个让父组件传入自定义内容的接口。插槽内可以包含任何模板代码，包括 HTML，甚至其他的组件。在工作中如果你的组件内的内容是可变的，这个时候我们可以考虑使用插槽。

3. 插槽的类型

<slot>有三种类型，他们分别是：

• 默认插槽 default
• 具名插槽 name
• 作用域插槽 v-slot

接下来，我们将一步步介绍这三种不同插槽的使用方式。

3.1 默认插槽的使用

在自定义组件中使用<slot />标签进行占位，当我们使用该组件时，在组件标签内写入需要展示的具体内容：

{
  components: {
    'MyConponent': {
      template: '<div><slot /></div>'
    }
  }
}
<my-conponent>这里是要显示的插槽内容！</my-conponent>

我们用一个简单的示例来学习以下如何使用默认插槽：