vue中slot插槽的使用

slot父组件向子组件插槽 

1.匿名

<template>
    <div>
      <slot></slot>
    </div>
</template>

父组件在引入组件的地方加上v-slot

<template>
    <div>
        <test-slot>
            <template v-slot>
                <div>插槽</div>
            </template>
        </test-slot>
    </div>
</template>
<script>
import TestSlot from './TestSlot.vue'
export default {
    components:{ TestSlot}
}
</script>

这样在父组件的子组件就会显示插槽中的内容了

2.具名

具名顾名思义就是给插槽定义name 实现自由插入

<template>
    <div>
      <slot name="first"></slot>
      <slot name="second"></slot>
    </div>
</template>

父组件使用#name引入

<template>
    <div>
        <test-slot>
            <template #first>
                <div>我是插槽first</div>
            </template>
            <template #second>
                <div>我是插槽second</div>
            </template>
        </test-slot>
    </div>
</template>
<script>
import TestSlotfrom './TestSlot.vue'
export default {
    components:{ TestSlot}
}
</script>

3.作用域插槽

使用子组件传来的信息进行插槽

<template>
    <div>
      <div>hello world</div>
      <!-- ⼦组件中告诉⽗组件，要实现obj⾥的信息 -->
        <slot :info="info"></slot>
    </div>
</template>
<script>
import { reactive } from "vue";
export default {
     data(){
       return{
         objInfo:{
               title:'我是匿名插槽',
               msg:'我是msg'
            }
        }
     } 
}
</script>

<template>
    <div>
        <test-slot>
            <template v-slot="slotProps" >
                <div>{{slotProps.info}}</div>
                <div>{{slotProps.info.title}}</div>
            </template>           
        </test-slot>
    </div>
</template>
<script>
import TestSlot from './TestSlot.vue'
export default {
    components:{ TestSlot}
}
</script>

这样就成功了