插槽（默认插槽、具名插槽、作用域插槽、具名作用域插槽）

1.默认插槽
父组件

<script setup>
    import Gategory from './components/Category.vue'
    import {ref} from 'vue'
    let foods=ref(['火锅','烧烤','小龙虾'])
    let games=ref(['LOL','王者荣耀','qq飞车'])
    let films=ref(['教父','拆弹专家','碟中谍'])
</script>
<template>
    <div class="container">
        <Gategory title="食物" >
            dddd
        </Gategory>
        <Gategory title="游戏" >   
            <ul v-for="(g,index) in games" :key="index">
                <li>{{g}}</li>
            </ul>
        </Gategory>
        <Gategory title="游戏" >   
            <a href="http://www.baidu.com">http://www.baidu.com</a>
        </Gategory>
    </div>
</template>
<style lang="css">
    .container{
        display:flex;
        justify-content: space-around;
        
    }
</style>

子组件

<script setup>
    import {defineProps, toRefs} from 'vue';
    const props=defineProps({
        todoList:Array,
        title:String
    })
    let {todoList,title}=toRefs(props)
    
</script>
<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- <ul v-for="(l,index) in todoList" :key="index">
            <li>{{l}}</li>
        </ul> -->
        <slot></slot>
    </div>
</template>
<style>
.category{
    background-color: aqua;
    width: 100px;
    height: 200px;
}
h3{
    background-color: red;
    text-align: center;
}
</style>

2.具名插槽：给插槽带上标识，按名匹配插槽
父组件

        <Gategory title="食物" >
            <template v-slot:header>
                <div>dddd</div>
            </template><br>
            <template v-slot:footer>
                <a href="http://www.baidu.com">跳转百度</a>
            </template>
        </Gategory>

子组件

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot name="footer"></slot>
        <slot name="header"></slot>
    </div>
</template>

3.作用域插槽：子父组件利用slot传输数据
父组件

<template>
    <div class="container">
   
        <Gategory >   
            <template v-slot="games" >
              <ul v-for="(g,index) in games.games" :key="index">
                <li>{{g}}</li>
            </ul>
            </template>
        </Gategory>
         <Gategory >   
           <template v-slot="games"> 
               <ol v-for="(g,index) in games.games" :key="index">
                <li>{{g}}</li>
            </ol>
           </template>
        </Gategory>
        <Gategory v-slot="games" >   
            <h4 v-for="(g,index) in games.games" :key="index">
                {{g}}
            </h4>
        </Gategory>
    </div>

</template>

子组件

<script setup>
    import {ref} from 'vue'
    let games=ref(['LOL','王者荣耀','qq飞车'])
</script>
<template>
    <div class="category">
        <slot :games="games"></slot>
    </div>
</template>
<style>

4.具名作用域插槽
父组件

<template>
    <div class="container">
   
        <Gategory >   
            <template v-slot:header="{games,news}">
                <h2>
                    {{news}}
                </h2>
                 <ul v-for="(g,index) in games" :key="index">
                <li>{{g}}</li>
            </ul>
            </template>
        </Gategory>
         <Gategory >   
           <template v-slot:center="slotProps"> 
               <ol v-for="(g,index) in slotProps.games" :key="index">
                <li>{{g}}</li>
            </ol>
           </template>
        </Gategory>
        <Gategory>   
            <template  v-slot:footer="{foods}" >
               <h4 v-for="(g,index) in foods" :key="index">
                {{g}}
            </h4>
            </template>
            
        </Gategory>
    </div>
</template>

子组件

<script setup>
    import {ref} from 'vue'
    let games=ref(['LOL','王者荣耀','qq飞车'])
    let love=ref('love')
    let foods=ref(['烧烤','火锅'])
</script>
<template>
    <div class="category">
        <slot name="header" :games="games" :news="love"></slot>
        <slot name="center" :games="games" :news="love"></slot>
        <slot name="footer" :foods="foods"></slot>
    </div>
</template>