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>

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

实例演示
预览 复制