当前位置:网站首页>组件传值-作用域插槽
组件传值-作用域插槽
2022-08-09 22:59:00 【Drizzlejj】
在父组件中使用子组件中的内容
作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
举个例子
父组件:
<template>
<div class="home">
<h4>效果一:显示代办列表时,已完成的任务为绿色</h4>
<Son :todolists="todolists"> <!-- 给子组件传递数据 -->
<template slot-scope="item">
<span :style="{backgroundColor:item.item.isComplete?'green':''}">父:{
{item.item.text}}</span>
</template>
</Son>
<h4>效果二:显示代办列表时,带序号,代办列表为蓝绿搭配</h4>
<Son1 :todolists="todolists"> <!-- 给子组件传递数据 -->
<template slot-scope={item,$index}>
<span :style="{backgroundColor:item.isComplete?'green':'blue'}">父:{
{$index}}---{
{item.text}}</span>
</template>
</Son1>
</div>
</template>
<script>
import Son from './Son.vue'
import Son1 from './Son1.vue'
export default {
name: 'Father',
components:{
Son,
Son1
},
data () {
return {
todolists:[
{id:1,text:'安全管理电视电话会议',isComplete:false},
{id:2,text:'部门小组生产计划',isComplete:false},
{id:3,text:'编制计划任务分工表,分配任务',isComplete:true},
{id:4,text:'遗留问题通报到组整改,检查整改成果',isComplete:false}
]
}
}
}
</script>
子组件 Son
<template>
<div class="about">
子组件
<ul>
<li v-for="(todolist,index) in todolists" :key="index">
子组件回传==>
<slot :item="todolist"></slot> <!-- 作用域插槽 -->
</li>
</ul>
</div>
</template>
<script>
export default {
props:{
todolists:[]
}
}
</script>
子组件Son1
<template>
<div class="about">
子组件
<ul>
<li v-for="(todolist,index) in todolists" :key="index">
子组件回传==>
<slot :item="todolist" :$index="index"></slot> <!-- 作用域插槽 -->
</li>
</ul>
</div>
</template>
<script>
export default {
props:{
todolists:[]
}
}
</script>
边栏推荐
猜你喜欢
服务发现@EnableDiscoveryClient
上交所实时行情文件汇总
【集训DAY5】选数字【数学】
Live Preview | ICML 2022 11 first-author scholars share online neural network, graph learning and other cutting-edge research
ES6 Beginner to Mastery #13: Extension Methods for Arrays 2
源码编译安装LAMP和LNMP
用哈希简单封装unordered_map和unordered_set
Travel with Shengteng: See all the AI attractions in Jinling City in one day
Golden Warehouse Database KingbaseGIS User Manual (6.4. Geometry Object Access Function)
Gartner全球集成系统市场数据追踪,超融合市场增速第一
随机推荐
多商户商城系统功能拆解24讲-平台端分销会员
直播间搭建,按钮左滑出现删除等操作按钮
ECCV 2022 | Microsoft Open Source TinyViT: Pre-training Capabilities for Small Models
A Shanghai technology company was fined 220,000 for brushing orders, exposing the gray industry chain of online brushing
【集训DAY3】挖金矿【二分答案】
Gold Warehouse Database KingbaseGIS User Manual (6.2. Management Functions)
分布式数据库难题(二):数据复制
上交所实时行情文件汇总
恭喜获奖得主 | 互动有礼获赠 Navicat Premium
工程 (七) ——PolarSeg点云语义分割
Sqlserver restricts the ip under which accounts can access the database
技术盛宴!华云数据携六大议题亮相OpenInfra Days China
基于ABP的AppUser对象扩展
南大通用数据库-Gbase-8a-学习-04-部署分布式集群
Gartner's global integrated system market data tracking, hyperconverged market growth rate is the first
Jpa 查询view or 无主键的table
ALV报表总结2022.8.9
KingbaseGIS Jin Cang database using manual (6.3. Geometric object creation function)
【SSL集训DAY2】Sort【树状数组】
Eureka protects itself