slot 插槽

具名插槽 
子组件demo：
template: `<div>
          <slot name="header"></slot>
          <div>content</div>
          <slot name="footer"></slot>
        </div>`
父组件：
<demo>
  <template v-slot:header><div>header</div></template>
   <template v-slot:footer><div>footer</div></template>
   //或者
  // <template #header><div>header</div></template>
  // <template #footer><div>footer</div></template>
 </demo>

作用域插槽

<div id="root">
  <demo v-slot="slotProps">
    <span>{{slotProps.item}}</span>
  </demo>
</div>
<script>
 Vue.component('demo', {
   data(){
     return {
       list:['z','j','h']
     }
   },
   template: `<div>
                <slot v-for="item in list" :item="item"/>
             </div>`
 })