Vue32 插槽

1 简介

　　是一种组件间通信的方式，让父组件可以向子组件指定位置插入 html 结构。子组件中的提供给父组件使用的一个占位标签，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

　　匿名插槽，具名插槽， 作用域插槽

2 匿名插槽

2.1 子组件 StudentComp.vue

　　在子组件StudentComp.vue中，<h1>小学生</h1>这个标签下面的结构是不确定的，希望在父组件使用该组件的时候传入结构。所以在这里添加一个slot标签。并且可以填写默认结构，当父组件不传时显示默认结构

<template>
    <div>

        <h1>小学生</h1>

        <slot>默认内容(父组件不传结构时显示)</slot>

    </div>

</template>

<script>

    export default {
        name:'StudentComp',
        data(){
            return {

            }
        }
    }
</script>

2.2 父组件SchoolComp.vue

　　如下，在使用StudentComp标签时，可以传入结构。在传入的结果上面需要加上一个属性slot，一般都用一个template标签来包裹要传入的结果

<template>
    <div>
        <h1 >实验小学</h1>
        <StudentComp >
            <template slot>
                <h1 >父组件传入的结构</h1>
                <button>父组件传入的结构</button>
            </template>

        </StudentComp>

    </div>
</template>

<script>
import StudentComp from './StudentComp'

    export default {
        name:'SchoolComp',
        data(){
            return {

            }
        },
        components:{
            StudentComp
        }

    }
</script>

2.3 效果

3 具名插槽

　　具名插槽是匿名插槽的扩展。就是在slot标签加了一个name属性，这个样子可以区分多个slot标签

3.1 子组件StudentComp.vue

　　这里有两个插槽，设置name属性

<template>
    <div>

        <h1>小学生</h1>

        <slot name="slot1">默认内容1(父组件不传结构时显示)</slot>

        <h1>中学生</h1>
        <slot name="slot2">默认内容2(父组件不传结构时显示)</slot>

    </div>

</template>

<script>

    export default {
        name:'StudentComp',
        data(){
            return {

            }
        }
    }
</script>

3.2 父组件SchoolComp.vue

　　这里要传入的结果slot属性的值要设置为要插入的插槽的name属性值

<template>
    <div>
        <h1 >实验小学</h1>
        <StudentComp >
            <template slot="slot1">
                <h1 >父组件传入的结构</h1>
                <button>父组件传入的结构</button>
            </template>

            <template slot="slot2">
                <h1 >父组件传入的结构2</h1>
                <button>父组件传入的结构2</button>
            </template>

        </StudentComp>

    </div>
</template>

<script>
import StudentComp from './StudentComp'

    export default {
        name:'SchoolComp',
        data(){
            return {

            }
        },
        components:{
            StudentComp
        }

    }
</script>

3.3 效果

4 作用域插槽

　　作用域插槽扩展了一个功能，可以把子组件的数据传到父组件

4.1 子组件StudentComp.vue

　　在插槽，可以传入数据到父组件那里。

　　在slot标签填写任意属性名，传入数据(可以填写多个属性名)

　　这里传入了两个数据，名字分别为datalist和count

<template>
    <div>

        <h1>小学生</h1>

        <slot name="slot1" :datalist="datalist" :count="count">默认内容1(父组件不传结构时显示)</slot>

    </div>

</template>

<script>

    export default {
        name:'StudentComp',
        data(){
            return {
              datalist:['a','b','c'],
              count:1
            }
        }
    }
</script>

4.2 父组件SchoolComp.vue

　　使用scope属性接收数据，接收到的是一个key-value对象

　　如下面，通过data.datalist和data.count可以获取到两个数据

<template>
    <div>
        <h1 >实验小学</h1>
        <StudentComp >
            <template slot="slot1" scope="data">
                <ul>
                    <li v-for="(g,index) in data.datalist" :key="index">{{g + '-' + data.count}}</li>
                </ul>
            </template>

        </StudentComp>

    </div>
</template>

<script>
import StudentComp from './StudentComp'

    export default {
        name:'SchoolComp',
        data(){
            return {

            }
        },
        components:{
            StudentComp
        }

    }
</script>

4.3 效果