一.插槽的用法

(1)语法

默认插槽:
定义
    组件内xxx:
        div
             <slot/>
     使用
       直接写
         <xxx>内容</xxx>
             
         <xxx>
             <template #default>
                   内容
             <template>
        </xxx>

具名插槽:
 组件内xxx:
        div
             <slot name="abc"/>
     使用
       直接写
         <xxx>内容</xxx>
             
         <xxx>
             <template #abc   非简写： v-slot:abc    >
                   内容
             <template>
        </xxx>


作用域插槽:
    默认插槽
      定义
         <div>
         <slot num='123'/>
        </div>
      使用
       <div slot-scope="{num}">  不建议使用
        <xxx>
      <template v-slot="scope/{num}">
         scope:{
          num:123
         }
      </template>
      </xxx>


  如果整个组件只有一个插槽且是作用域的默认插槽
     <xxx v-slot='scope/{num}'>
       div...
     </xxx>


    
   具名插槽
      <div>
         <slot num='123'  name="abc"/>
        </div>
      使用
       <div  slot="abc"  slot-scope="{num}">  不建议使用
        <xxx>
      <template v-slot:abc="scope/{num}"  #abc="scope/{num}">
         scope:{
          num:123
         }
      </template>
      </xxx>
    
默认插槽:
定义
    组件内xxx: