vue中的slot（插槽）

最近忙着写一些组件，关于插槽这一块本身仍是用着 slot 和 slot-scope，而后看了一下文档的更新，因而又从新把“插槽”学习了一篇，下面一段是文档中的说明:

在 2.6.0 中，咱们为具名插槽和做用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。

插槽，也就是slot，slot就是子组件里的一个占位符，一个slot的核心问题，就是显不显示，显示的话显示话，该如何去展现出来，这是由父组件所控制的，可是插槽显示的位置是由子组件本身所决定的，slot写在组件template的什么位置，父组件传过来的模板将会显示在什么位置。

插槽的基本使用方法(匿名插槽)

这是一个子组件，咱们使用了默认插槽(匿名插槽)，父组件的内容将会代替显示出来

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'children'
}
</script>
复制代码

// 使用children组件
 <children>代替slot的内容</children>
复制代码

渲染后的结果

<template>
  <div>
    代替slot的内容
  </div>
</template>
复制代码

具名插槽

自 2.6.0 起有所更新。已废弃的使用 slot 特性的语法在这里。

有时咱们一个组件里面须要多个插槽。咱们怎么来区分多个slot，并且不一样slot的显示位置也是有差别的.对于这样的状况， 元素有一个特殊的特性：name。这个特性能够用来定义额外的插槽：

• 注意:一个不带 name 的 出口会带有隐含的名字“default”。

以下面一个组件,须要多个插槽。如何向组件提供内容呢？

<template>
  <div>
    <header>
      <slot name="header"></slot>
      <slot></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>
复制代码

在向具名插槽提供内容的时候，咱们能够在一个 template 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称:

<!-- old -->
<children>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
  <template slot="default">
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
</children>

<!-- new -->
<children>
  <template v-slot:header>
  <!--  <template #header> 具名插槽可缩写形式 -->
    <h1>Here might be a page title</h1>
  </template>
  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
</children>
复制代码

渲染后的结果

<template>
  <div>
    <header>
      <h1>Here might be a page title</h1>
    </header>
    <main>
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    </main>
  </div>
</template>
复制代码

• 注意:v-slot 只能添加在一个 <template> 上 (只有一种例外状况)，这一点和已经废弃的 slot特性不一样。

• 例外状况: 当被提供的内容只有默认插槽时，组件的标签才能够被看成插槽的模板来使用。这样咱们就能够把 v-slot 直接用在组件上：

做用域插槽

自 2.6.0 起有所更新。已废弃的使用 slot-scope 特性的语法在这里。

有时候，插槽的内容中有须要访问到子组件里面的内容，相似子组件里的slot能够绑定一些当前做用域，从而传出来，使用组件时，插槽的内容就能够拿到slot传出来的数据,父级的插槽内容可用。

以下，让后备内容（slot默认内容）user.firstName 替换正常状况下的user.lastName

<span>
  <slot>
    {{ user.lastName}}
  </slot>
</span>
复制代码

绑定在 元素上的特性被称为插槽 prop。如今在父级做用域中，咱们能够给 v-slot 带一个值来定义咱们提供的插槽 prop 的名字：

// slot绑定了当前做用域下user对象
// 为什slot中还有内容呢？不是由插槽内容填充吗？在slot中有内容，咱们能够称之为后备内容，
就是slot的默认内容，但咱们使用这个插槽时，却没有内容填充，就会显示其默认的内容。
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
复制代码

在父级做用域中，咱们能够给 v-slot 带一个值来定义咱们提供的插槽 prop 的名字,slotProps能够任意命名的，经过slotProps.use就拿到了子组件slot传出来的对象。

<!-- old -->
<children>
  <template slot="default" slot-scope="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</children>

<!-- new -->
<children>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</children>
复制代码

在上述状况下，当被提供的内容只有默认插槽时，这样咱们就能够把 v-slot 直接用在组件上：

<children v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
</children>
// default能够省略,默认插槽的缩写语法
<children v-slot="slotProps">
    {{ slotProps.user.firstName }}
</children>
<!-- 解构插槽 prop -->
<childrenv-slot="{ user }">
    {{ user.firstName }}
</children>
<!-- user 重命名为 person-->
<childrenv-slot="{ user: person}">
    {{ person.firstName }}
</children>
复制代码

• 注意:默认插槽的缩写语法不能和具名插槽混用，由于它会致使做用域不明确,只要出现多个插槽，请始终为全部的插槽使用完整的基于 template 的语法

后备内容

什么是后备内容呢，一个slot有它的默认的内容，有时为一个插槽设置具体的后备 (也就是默认的) 内容是颇有用的，它只会在没有提供内容的时候被渲染。

总结

这里只是简单描述了几个关键点，其实还有不少可扩展的，或其余特性，咱们仍是须要多去看文档，多学习。