vue插槽slot

1. 要在子组件中提供一个插槽 占一个位置

<slot></slot>

子组件代码

<template>
    <div class="slotSub">
        <br>
        <hr>
        <strong>ERROR</strong>
        <slot></slot>
    </div>
</template>
<script>
export default {
    
    name: 'SlotSub',
}
</script>
<style scoped>

</style>

2. 父组件代码

<!-- BrotherCard.vue -->
<template>
    <div class="slotFa">
        <slot-sub>有BUG</slot-sub>
        <slot-sub>有一个警告</slot-sub>
    </div>
</template>
<script>
import SlotSub from './SlotSub.vue'
    export default {
        name: 'SlotFa',
        components:{
            SlotSub
        }
    }
</script>

效果

如果子组件中定义的slot之间有内容 ，当父组件中传递的有参数则覆盖
无参数则显示插槽之间的内容

当父组件模板变为

<div class="slotFa">
        <slot-sub>有BUG</slot-sub>
        <slot-sub>有一个警告</slot-sub>
        <slot-sub></slot-sub>
    </div>

子组件变为

<div class="slotSub">
        <br>
        <hr>
        <strong>ERROR</strong>
        <slot>默认内容</slot>
        <slot></slot>
    </div>

效果图为

具名插槽

父组件代码

<!-- 具名插槽 -->
    <div>
        <slot-sub-by-name>
            <p slot="header">标题信息</p>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <p slot="footer">尾部信息</p>
        </slot-sub-by-name>
        <slot-sub-by-name >
        	//template可以包含多个标签，而且自身不会显示
            <template slot="header">
                <p>标题1</p>
                <p>标题2</p>
            </template>
            <template slot="footer">
                <p>尾部1</p>
                <p>尾部2</p>
            </template>
            <template>
                <p>1234</p>
                <p>12342</p>
                
            </template>
        </slot-sub-by-name>
    </div>
   

子组件代码

    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>

作用域插槽

父组件代码

<template>
 <div>
        <slot-sub-by-name :list='list'>
            <template slot-scope="slotProps">
            <strong v-if="slotProps.info.id==2" class="current" > {{slotProps.info.name}}</strong>
            <span v-else> {{slotProps.info.name}}</span>
            </template>
        </slot-sub-by-name>
    </div>
</template>


data(){
            return{
                list:[{
                    id:1,
                    name: 'apple'
                },
                {
                    id:2,
                    name: 'orange'
                },
                {
                    id:3,
                    name: 'banana'
                }]
            }
<style scoped>
	.current{
   	 	font-size: 30px;
    	color: chartreuse;
	}
</style>

子组件

<template>
    <div class="slotSubByName">
        <ul>
            <li :key='item.id' v-for='item in list'>
                <slot :info='item'>{{item.name}}</slot>
            </li>
        </ul>
        
    </div>
</template>
<script>
export default {
    name: 'SlotSubByName',
    props:['list']
}
</script>
<style scoped>

</style>

**子组件通过slot标签 把item 绑定到 info
父组件通过 template 标签的slot-scope=“slotProps” 获取到info 进而可以得到item对象 即可通过判断找对对应item
**

总结

一般插槽
子类没有内容则直接显示父类内容，如果有内容则覆盖
具名插槽
父组件通过slot=“xxx” 绑定子组件
父组件还可以通过包含多组内容
通过name属性
作用域插槽
在父组件通过 template 标签的slot-scope 属性值slotProps（一般都是这个命名，也可以自定义）绑定info找到item 然后可以获取到对应的id name