插槽的使用

slot插槽，一般在封装组件的时候使用，在组件内不知道以那种形式来展示内容时，可以用slot来占据位置，最终展示形式由父组件以内容形式传递过来，主要分为三种：

• 默认插槽：又名匿名插槽，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
• 具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。
• 作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

<!-- 子组件 -->
<template>
  <div>
    <header>
      <!-- 定义一个名为 "header" 的插槽 -->
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 定义一个默认插槽 -->
      <slot></slot>
    </main>
    <footer>
      <!-- 定义一个名为 "footer" 的插槽 -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- 父组件 -->
<template>
  <Child>
    <!-- 默认插槽的内容 -->
    <p>这是默认插槽的内容</p>
    <!-- 具名插槽的内容 -->
    <template v-slot:header>
      <h1>这是页头</h1>
    </template>
    <template v-slot:footer>
      <p>这是页脚</p>
    </template>
  </Child>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  }
}
</script>

在这个例子中，<Child> 组件定义了三个插槽：一个默认插槽和两个具名插槽（"header" 和 "footer"）。在父组件中，我们使用 v-slot: 指令来指定插槽的内容。对于具名插槽，我们使用 <template> 标签包裹插槽内容，并通过 v-slot: 指令后跟插槽的名字来指定它。对于默认插槽，我们直接在组件标签内部写入内容。