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

原创已于 2022-04-28 23:40:50 修改 · 7.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-04-26 19:00:14 首次发布

本文探讨了如何在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、图示：

父组件

子组件