插槽的三大类

一.插槽的用法

(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>
    

二.代码案例---默认插槽

APP.VUE

<template>
  <div class="">
    <HelloWorld>默认 </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '../src/components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  },
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

HelloWorld.VUE

<template>
  <div class="">
     <slot> </slot>
  </div>
</template>

<script>
export default {
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

三.代码案例--具名插槽

<template>
  <div class="">
    <HelloWorld v-slot:abc>默认 1</HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '../src/components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  },
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

<template>
  <div class="">
     <slot name='abc'> </slot>
  </div>
</template>

<script>
export default {
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

三.作用域插槽

<template>
  <div class="">
    <HelloWorld>
    <template  v-slot='{num}'>
      <div>
         {
   
   {num.a}}
      </div>
    </template>

    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '../src/components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  },
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

<template>
  <div class="">
     <slot  :num='num' > </slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: {
        a: 10
      }
    }
  },
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

 具名的步骤也是一样的。