作用域插槽具体使用步骤，具名插槽+匿名插槽的使用方法详解

插槽：提升组件的复用度，通过提高的方式
具名插槽（默认插槽）：当只有一处内容需要填充时候
定义组件：my-com

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

使用组件：

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

---

匿名插槽：当有多处内容需要填充时

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

使用组件：

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

---

作用域插槽：当组件内部有数据，它提供给插入的内容去使用

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

使用组件：

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

作用域插槽传值具体步骤：
第一步：定义组件：
给组件绑定相应的属性 属性代表传递的数据
第二步：使用组件，获取数据
在插槽中 用 slot-scope属性接受数据
第三步：使用数据
在需要使用数据的容器中，使用data.数据名去使用数据