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

相关推荐
mCell14 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip14 小时前
Node.js 子进程:child_process
前端·javascript
excel17 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel18 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼19 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping19 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙20 小时前
[译] Composition in CSS
前端·css
白水清风20 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix21 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780021 小时前
new、原型和原型链浅析
前端·javascript