【Vue】组件插槽

注意：2.6.0之后为具名插槽和作用域引入了统一语法v-slot,取代了slot和slot-scope两个目前已被废弃但未被移除且在文档中的特性。

插槽分为三类：

1.匿名插槽（默认插槽），没有命名有且只有一个

2.具名插槽，即slot带有name

3.作用域插槽，子组件数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

匿名插槽(默认插槽，name为default)

在子组件通过slot添加匿名插槽

<template>
  <div class="container">
    <header>
      <slot></slot>
    </header>
    <div>children</div>
  </div>
</template>

父组件使用插槽　

<template>
  <div>
    <children>
      <div>Father use slot</div>
    </children>
  </div>
</template>

效果

<slot>有name特性，当不填时默认为default，上例实际是子组件<slot name="default"/>，父组件的使用<div slot="default">Father use default slot</div>

具名插槽

即指定子组件中name特性的值

<template>
  <div class="container">
    <slot></slot>
    <header>
      <slot name="title"></slot>
    </header>
    <div>children</div>
  </div>
</template>

父组件

<template>
  <div>
    <children>
      <template>默认插槽</template>
      <template v-slot:title>具名插槽</template>
    </children>
  </div>
</template>

效果