Vue插槽用法(Vue三种插槽的区别)

 分类:vue教程时间:2022-06-13点击: 2022前端视频教程(自学必看)

Vue插槽有几种?有匿名插槽、具名插槽、作用域插槽。Vue为具名插槽和作用域插槽引入了一个新的统一语法:v-slot,它取代了slot 和slot-scope 在新版中的应用,本文讲解Vue插槽的用法,这三种插槽的区别。

Vue插槽用法

一、新语法v-slot介绍

v-slot只能用在 template 或组件上使用,否则就会报错。

v-slot也是其中一种指令。

使用示例:

//父组件代码
<child-com>
 <template v-slot:nameSlot>
  插槽内容
 </template> 
</child-com>
//组件模板
<slot name="nameSlot"></slot>

v-slot 的语法,简化 slot、slot-scope 作用域插槽的功能,相比更加强大,代码效率更高。

二、匿名插槽

当组件中只有一个插槽的时候,可以不设置 slot 的 name 属性,v-slot 后可以不带参数,但是 v-slot 在没有设置 name 属性的插槽口也会带有隐含的 “default”。

匿名插槽使用:

//组件调用
<child-com>
 <template v-slot>
  插槽内容
 </template>
</child-com>
//组件模板
<slot ></slot>

虽然 v-slot 没有设置参数,但不能删除掉 ,否则插槽内容无法正常渲染。

三、具名插槽

一个组件中有多个插槽的时候,如果没有设置 v-slot 属性值,会默认把元素插到没有设置 name 属性值的 slot 组件中,为了把对应的元素放到指定的位置,就需要借助 v-slot 和 name 属性,把内容对应起来。

具名插槽使用:

//父组件
<child-com>
 <template v-slot:header>
  头部
 </template>
 <template v-slot:body>
  内容
 </template>
 <template v-slot:footer>
  脚
 </template>
</child-com>
//子组件  
<div>
 <slot name="header"></slot>
 <slot name="body"></slot>
 <slot name="footer"></slot>
</div>

具名插槽缩写

v-slot 与 v-bind、v-on 指令一样,也存在缩写。可以把 v-slot: 简写为 # 号。

如上述 v-slot:footer 可以简写为 #footer 。

上述的父组件代码可以简化为:

<child-com>
 <template #header>
  头部
 </template>
 <template #body>
  内容
 </template>
 <template #footer>
  脚
 </template>
</child-com>

注意:和其他指令一样,只有存在参数时,才可以简写,否则是无效的。

四、作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时,这是一个常见的情况,我们希望能够自定义每个项目的渲染方式。

要使子组件上的属性在插槽内容上可用,需要给 slot 绑定一个属性。然后在 v-slot 处接收并定义提供插槽 props 名字。

使用示例:

<child-com>
 <template v-slot:header="slotProps">
  插槽内容--{{ slotProps.item }} 序号--{{ slotProps.index }}
 </template>
</child-com>
//子组件代码
<template>
 <div v-for="(item, index) in arr" :key="index">
  <slot :item="item" name="header" :index="index"></slot>
 </div>
</template>
<script setup>
 const arr = ['1111', '2222', '3333']
</script>
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: