vue判断插槽有无进行显示隐藏、row属性

本文探讨了如何在Vue.js中根据插槽是否存在来决定元素的显示隐藏,并详细介绍了row属性的使用,包括如何通过row获取当前结构渲染的数据及父组件list的长度。内容包括循环渲染data、v-slot的运用以及父子组件间的数据传递。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、根据插槽有无的情况,显示图标

v-if="$slots.before"
  mounted() {
    console.log(this.$slots)
  }

二、row属性

1、通过row拿到当前结构渲染的数据

1.1循环渲染data数据

<el-table :data="[{ name: '88' }, { name: '99' }, { name: '11' }]">

1.2v-slot拿到obj对象,其下有一个row属性,该属性表示当前结构渲染的所有数据

  <template v-slot="obj">
   {{ obj.row }}
  </template>
<!-- <template v-slot="{ row }">
   {{ row }}
</template> -->

  图片引用自:之前vue笔记 slot插槽

2、通过row拿到父组件list长度

2.1、父组件传入数据

<PageTool :list=[{},{},{},{}]>
    <tempalate #before='obj'>
        {{JSON.stringify(obj)}}
        <span>{{obj.row}}</span>
    </tempalate>
</PageTool>

2.2子组件接收数据

props:{
    list:{
        type:Array,
        default:()=>([])
    }
}

2.3子组件插槽传入数据

<slot :row='list.length'/>

2.4结论

JSON.stringify(obj) ==={"row":3}

3、图示:

父组件

子组件

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值