Specific steps to use scoped slots, detailed explanation of how to use named slots + anonymous slots

Slot: Improve the reusability of the component by improving the
named slot (default slot): When there is only one content to be filled.
Define the component: my-com

<template>
<header>头部</header>
<main><slot><slot></main>
<footer>底部</footer>
</template>

Use components:

<template>
    <my-com>
    </my-com>
</template>

---

Anonymous slot: when there is more content to fill

<template>
<header >头部</header>
<main><slot name="123"><slot></main>
<footer name="234" >底部</footer>
</template>

Use components:

<template>
    <my-com>
    <div slot="123">内容</div>
    <div slot="234">内容</div>
    </my-com>
</template>

---

Scope slot: When there is data in the component, it is provided to the inserted content to use

<template>
<header>头部</header>
<main><slot name="123" :row="row" age="20"><slot></main>//在插槽中传入数据
<footer>底部</footer>
</template>
<script>
export Default{
    
    
    data(){
    
    
        row:[name:"111",name:"222"]
    }
}
</script>

Use components:

<template>
    <my-com>
    <div slot="123" slot-scope="data">//data代表给该插槽传递所有数据{row,age}
    <span v-for="item in data.row"></span>
    </div>
    <div slot="234">内容</div>
    </my-com>
</template>

The specific steps to pass the value of the scope slot:
First step: Define the component:
bind the corresponding attribute to the component to represent the passed data.
Step 2: Use the component to get the data. Use the
slot-scope attribute to receive the data in the slot.
Third Step: Use data
In the container that needs to use data, use data. data name to use data