父元件可以向子元件插入指定未知html結構，也是一種元件間通訊方式，適用於 父元件 -> 子元件。

預設插槽

父元件：
      <Student>
        <div>html結構</div>
      </Student>
子元件：
      <template>
        <div>
          <slot>插槽預設內容</slot>
        </div>
      </template>

具名插槽

父元件：
      <Student>
        <template slot='nameOne'>
          <div>html結構</div>
        </template>
        或
        <template v-slot:nameOne>   //v-slot:只限在<template>標籤中使用。
          <div>html結構</div>
        </template>
      </Student>
子元件：
      <template>
        <div>
          <slot name='nameOne'>插槽預設內容</slot>
        </div>
      </template>
 

作用域插槽

資料在元件的自身，但根據資料生成的結構需要元件的使用者來決定。

父元件：
    <Student>
      <template scope="h">
        <ol>
          <li v-for="(item,index) in h.hzc" :key="index">{{item}}</li>
        </ol>
      </template>
    </Student>

子元件：
    <template>
      <div>
        <slot :hzc="numberStr"></slot>
      </div>
    </template>

    <script>
    export default {
      name: "Student",
      data(){
        return{
          numberStr:['one','two','three']
        }
      }
    }
    </script>