作用：讓父元件可以向子元件指定位置插入HTML結構，也是一種元件通訊的方式，適用於 父元件==>子元件。

分類：預設插槽、具名插槽、作用域插槽

使用方式：

1. 預設插槽

   父元件：
   <Son>
   	<div>html結構</div>
   </Son>
   子元件：
   <template>
   	<div>
           <!--定義插槽-->
           <slot>插槽預設內容</slot>
       </div>
   </template>
 

2. 具名插槽

   父元件：
   <Son>
   	<template slot="center">
       	<div>html結構1</div>
       </template>
       
       <!--v-slot僅適用於templat標籤和元件標籤-->
       <template v-slot:footer>
       	<div>html結構2</div>
       </template>
   </Son>
   子元件：
   <template>
   	<!--定義插槽-->
       <slot name="center">插槽預設內容</slot>
   	<slot name="footer">插槽預設內容</slot>
   </template>
 

3. 作用域插槽

   1. 理解： 資料在定義插槽的元件自身，但根據資料生成的結構需要元件的使用者來決定（資料films在Son元件中，但使用資料遍歷出來的結構由App元件決定）

   2. 具體編碼

      父元件：
      <Son>
          <!--
              scope的值接收物件，子元件中slot標籤可能傳遞多個數據，物件點屬性名即可獲取對應的資料，scope支援解構賦值
              scope舊的API
              slot-scope新的API
              兩者使用方式一致
            -->
      	<template scope="scopeData">
          	<!--生成的是ul列表-->
      		<ul>
                  <li v-for="f in scopeData.films" :key="f">{{f}}</li>
              </ul>
          </template>
      </Son>
      
      <Son>
      	<template slot-scope="{{films}}">
          	<!--生成的是h4標籤-->
              <h4 v-for="f in films" :key="f">{{f}}</h4>
          </template>
      </Son>
      子元件
      <template>
      	<div>
              <slot :films="films"></slot>
          </div>
      </template>
      
      <script>
      	export default{
              name:'Son',
              //資料在子元件自身
              data(){
                  return{
                      films: ["這個殺手不太冷", "我和我的祖國", "建軍大業", "懸崖上的金魚姬"]
                  }
              }
          }
      </script>