插槽就是子組件預留給父組件放置內容的空間，如果沒有插槽，那么我們在父組件中使用子組件時，往子組件里添加內容是無效的。
父組件：

<template>
  <div style="text-align: center">
    <todo-item>
      <!-- 子組件標簽里的內容將不會顯示 -->
      <span>這里是父組件DOM</span>
    </todo-item>
  </div>
</template>

那么有什么辦法可以讓子組件標簽像div一樣可以在里面放置內容嗎？當然是有的，就是 我們要介紹的插槽slot。

slot

如果我們在子組件中添加插槽，那么放入子組件標簽中的內容就會被加載到slot中。
子組件：

<template>
  <div style="text-align: center" class='child'>
    <h3>這是子組件</h3>
    <!-- 像這樣添加slot標簽即可 -->
   <slot></slot>
  </div>
</template>

這樣父組件中添加的內容將會替換掉slot，相當于
子組件：

<div style="text-align: center" class='child'>
    <h3>這是子組件</h3>
    <!-- slot標簽會被替換掉 -->
    <span>這里是父組件DOM</span>
</div>

每一個子組件都應該有一個像這樣不帶名字的插槽，稱為單個插槽。
同時我們也可以增加一些帶有名字的插槽，控制DOM內容的不同位置，帶有name屬性的插槽稱為具名插槽。
子組件

<template>
  <div style="text-align: center" class='child'>
    <slot name="top"></slot>
    <h3>這是子組件</h3>
    <slot></slot>
    <hr style="margin-top: 20px">
    <slot name="down"></slot>
  </div>
</template>

父組件中要添加slot屬性：

<template>
  <div style="text-align: center">
    <todo-item>
      <span class="father-dom">這里是父組件DOM</span>
      <span slot="down">這是底部</span>
      <span slot="top">這是頂部</span>
    </todo-item>
  </div>
</template>

不管父組件中增加的DOM先后順序如何，具名插槽總是對應到同名的子組件位置處，剩下的對應到單個插槽處。如果在父組件中給了slot屬性，但是子組件中并沒有該插槽，那么那個標簽將不會顯示。

slot-scope

這個屬性是給父組件中插入在子組件標簽中的DOM使用的，可以獲取插槽上的屬性值。
父組件

<template>
  <div style="text-align: center">
    <todo-item :message="message">
      <template slot-scope="scope">
        <span>{{scope}}</span><br>
        <span>{{scope.data}}</span>
      </template>
    </todo-item>
  </div>
</template>

子組件：

<template>
  <div style="text-align: center" class='child'>
    <h3>這是子組件</h3>
    <slot :data="message"></slot>
  </div>
</template>

父組件中slot-scope綁定的scope對應的數據就是子組件中slot上的data。