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标签中全部暴露传入的属性内容,因此,如果想获取某个内容属性值时,需要采用对象名.属性名的形式就可以直接获取到单个传入的属性值。

相关推荐
五点六六六6 分钟前
前端常见的性能指标采集
前端·性能优化·架构
吳所畏惧9 分钟前
NVM踩坑实录:配置了npm的阿里云cdn之后,下载nodejs老版本(如:12.18.4)时,报404异常,下载失败的问题解决
前端·windows·阿里云·npm·node.js·batch命令
陈随易24 分钟前
AI新技术VideoTutor,幼儿园操作难度,一句话生成讲解视频
前端·后端·程序员
Pedantic27 分钟前
SwiftUI 按钮Button:完整教程
前端
前端拿破轮29 分钟前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温31 分钟前
DOM元素添加技巧全解析
前端
JSON_L34 分钟前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊35 分钟前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
用户214118326360242 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端
奇舞精选1 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly