slot 又称插槽，它是在子组件中为父组件提供的一个占位符，使用来表示，通过这个占位符，父组件可以向中填充任意的内容代码，这些代码将自动替换占位符的位置，从而轻松实现在父组件中控制子组件内容的需求。
作用域插槽
插槽分为三种，分别为匿名插槽、具名插槽和作用域插槽，与前两种只能各自访问自己组件的内容不同，作用域插槽可以在父组件中访问到子组件的内容，使用非常灵活。
接下来，结合一个完整的实例需求，来演示在作用域插槽中，父组件如何访问和过滤子组件传入的参数。
实例7-5 作用域插槽传参
1. 功能描述
在一个父组件中，添加一个子组件，子组件中以作用域插槽的方式为父组件提供数据源，父组件显示子组件数据时，隐藏索引号等于0的内容。
2. 实现代码
在项目的components 文件夹中，添加一个名为“Parent”的.vue文件，该文件的保存路径是“components/ch7/part5/”，在文件中加入如清单7-11所示代码。
代码清单7-11 Parent.vue代码
<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代码
<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标签中全部暴露传入的属性内容，因此，如果想获取某个内容属性值时，需要采用对象名.属性名的形式就可以直接获取到单个传入的属性值。
