插槽 (Slot）是vue為元件的封裝者提供的能力。允許開發者在封裝元件時，把不確定的、希望由使用者指定的部分定義為插槽。

<!--    宣告一個插槽區域-->
<!--    官方規定，每一個插槽，都需要指定name-->
<!--    如果不指定，預設為default-->
    <slot name="default">
      <h6>插槽中的預設內容</h6>
    </slot>

      <Left>
<!--       如果要把內容填充到指定插槽中，需要使用v-slot:這個指令-->
<!--        v-slot:後面跟插槽名-->
<!--        v-slot:指令只能用於template標籤上，不能直接作用於元素，它只是起到包裹作用，不會渲染到html中-->
<!--        v-slot:簡寫成#-->
        <template #default>
          <p>插槽內容</p>
        </template>

      </Left>

具名插槽

<!--    標題-->
    <div class="header-box">
      <slot name="title"></slot>
    </div>
<!--    內容-->
    <div class="content-box">
      <slot name="content"></slot>
    </div>
<!--    作者-->
    <div class="footer-box">
      <slot name="footer"></slot>
 

    </div>

使用插槽

      <template #title>
        <h3>一首詩</h3>
      </template>
      <template #content>
        <div>124124</div>
      </template>
      <template #footer>
        <div>bgg</div>
      </template>

作用域插槽

<slot name="
 
content" msg="hello vue"></slot>


//使用

<template #content="scope">
  <div>124124</div>
  <p>{{scope.msg}}</p>
</template>