Vue前端开发-slot传参

slot 又称插槽，它是在子组件中为父组件提供的一个占位符，使用来表示，通过这个占位符，父组件可以向中填充任意的内容代码，这些代码将自动替换占位符的位置，从而轻松实现在父组件中控制子组件内容的需求。

作用域插槽

插槽分为三种，分别为匿名插槽、具名插槽和作用域插槽，与前两种只能各自访问自己组件的内容不同，作用域插槽可以在父组件中访问到子组件的内容，使用非常灵活。

接下来，结合一个完整的实例需求，来演示在作用域插槽中，父组件如何访问和过滤子组件传入的参数。

实例7-5 作用域插槽传参

1. 功能描述

在一个父组件中，添加一个子组件，子组件中以作用域插槽的方式为父组件提供数据源，父组件显示子组件数据时，隐藏索引号等于0的内容。

2. 实现代码

在项目的components 文件夹中，添加一个名为"Parent"的.vue文件，该文件的保存路径是"components/ch7/part5/"，在文件中加入如清单7-11所示代码。

代码清单7-11 Parent.vue代码

csharp 复制代码

<template>
    <child>
        <template v-slot:header="slotProps">
            <div class="info" v-show="slotProps.index != 0">
                {{ slotProps }},
                姓名--{{ slotProps.item }}, 
序号--{{ slotProps.index }}
            </div>
        </template>
    </child>
</template>
<script>
import Child from "./Child.vue"
export default {
    components: {
        Child
    }
}
</script>
<style scoped>
.info{
    margin: 10px 0;
    padding: 5px 0;
    width: 400px;
    border-bottom: solid 1px #ccc;
}
</style>

在父组件中，导入子组件 Child.vue文件，它的功能是将遍历后的数组项，以插槽的方式作为父组件显示的数据源，它的代码如清单7-12所示。

代码清单7-12 Child.vue代码

csharp 复制代码

<template>
    <div v-for="(item, index) in arr" :key="index">
        <slot :item="item" name="header" :index="index">
</slot>
    </div>
    <button @click="add">增加</button>
</template>
<script>
export default {
     data(){
        return{
            arr:["张明明","李小华","王忠远"]
        }
     },methods:{
        add(){
            this.arr.push("陶国荣")
        }
     }
}
</script>

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图7-6所示。

4. 源码分析

在本实例的子组件Child源码中，为了使父组件Parent能直接访问到传入的数据源，首先，借助插槽slot标签向父组件传入数据，并以标签属性prop的形式，向父组件暴露可以访问的属性名，当父组件使用template标签替换slot标签时，就可以调用template中v-slot 属性直接获取子组件传入的数据，并对数据执行过滤操作。

需要说明的是：通过template标签中v-slot属性获取的是一个对象，它包含slot标签中全部暴露传入的属性内容，因此，如果想获取某个内容属性值时，需要采用对象名.属性名的形式就可以直接获取到单个传入的属性值。