slot插槽

一、什么是插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

二、插槽的使用

1、默认插槽

默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。

<template id="course">
  <div>
    <!-- 插槽 -->
    <h2>
      <slot></slot>

    </h2>
    <ul>
      <li v-for="(item,index) in courseList" :key="index">
        <img :src="item.coverFileUrl" alt="">
        <div>{{ item.courseTitle }}</div>
        <div>免费</div>
      </li>
    </ul>
  </div>
</template>

2、具名插槽

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

<template id="course">
  <div>
    <!-- 具名插槽 -->
    <h2>
      <slot name="header"></slot>
    </h2>
    <ul>
      <li v-for="(item,index) in courseList" :key="index">
        <img :src="item.coverFileUrl" alt="">
        <div>{{ item.courseTitle }}</div>
        <div>免费</div>
      </li>
    </ul>
    <!-- 具名插槽 -->
    <h2>
      <slot name="footer"></slot>
    </h2>
  </div>
</template>

<template v-slot:header>
  <div>
    课程顶部
  </div>
</template>

<template v-slot:footer>
  <div>
    课程底部
  </div>
</template>

3、作用域插槽

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。但由于应用场景较少，所以基本不会使用，只用作了解。 

<template id="course">
  <div>
    <slot :text="greetingMessage" :count="1"></slot>
  </div>
</template>

<template v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</template>

三、小结

1、父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。

2、如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就不会填充到子组件的任何一个插槽中。

3、如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将会全都填充到子组件的每个默认插槽中。