服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue.js - Vue3 学习笔记—插槽使用大全

Vue3 学习笔记—插槽使用大全

2021-12-29 23:25前端人 vue.js

在 2.6.0中,vue 为具名插槽和作用于插槽引入了一个新的统一语法:v-slot。它取代了 slot 和 slot-scope 在新版中的应用。本篇文章主要介绍在 vue3 中插槽的使用。

Vue3 学习笔记—插槽使用大全

在 2.6.0中,vue 为具名插槽和作用于插槽引入了一个新的统一语法:v-slot。它取代了 slot 和 slot-scope 在新版中的应用。

本篇文章主要介绍在 vue3 中插槽的使用。

一、v-slot 介绍

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

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

使用示例:

  1. //父组件代码 
  2. <child-com> 
  3.  <template v-slot:nameSlot> 
  4.   插槽内容 
  5.  </template> 
  6. </child-com> 
  7.  
  8. //组件模板 
  9. <slot name="nameSlot"></slot> 

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

二、匿名插槽

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

匿名插槽使用:

  1. //组件调用 
  2. <child-com> 
  3.  <template v-slot> 
  4.   插槽内容 
  5.  </template> 
  6. </child-com> 
  7.  
  8. //组件模板 
  9. <slot ></slot> 

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

三、具名插槽

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

具名插槽使用:

  1. //父组件 
  2. <child-com> 
  3.  <template v-slot:header> 
  4.   头部 
  5.  </template> 
  6.  <template v-slot:body> 
  7.   内容 
  8.  </template> 
  9.  <template v-slot:footer> 
  10.   脚 
  11.  </template> 
  12. </child-com> 
  13.      
  14. //子组件   
  15. <div> 
  16.  <slot name="header"></slot> 
  17.  <slot name="body"></slot> 
  18.  <slot name="footer"></slot> 
  19. </div> 

具名插槽缩写

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

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

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

  1. <child-com> 
  2.  <template #header> 
  3.   头部 
  4.  </template> 
  5.  <template #body> 
  6.   内容 
  7.  </template> 
  8.  <template #footer> 
  9.   脚 
  10.  </template> 
  11. </child-com> 

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

四、作用域插槽

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

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

使用示例:

  1. // 
  2. <child-com> 
  3.  <template v-slot:header="slotProps"
  4.   插槽内容--{{ slotProps.item }} 序号--{{ slotProps.index }} 
  5.  </template> 
  6. </child-com> 
  7.      
  8. //子组件代码 
  9. <template> 
  10.  <div v-for="(item, index) in arr" :key="index"
  11.   <slot :item="item" name="header" :index="index"></slot> 
  12.  </div> 
  13. </template> 
  14. <script setup> 
  15.  const arr = ['1111''2222''3333'
  16. </script> 

五、动态插槽名

v-slot 指令参数也可以是动态的,用来定义动态插槽名。

如:

  1. <child-com> 
  2.  <template v-slot:[dd()]> 
  3.   动态插槽名 
  4.  </template> 
  5. </child-com> 
  6.  
  7. <script setup> 
  8. const dd = () => { 
  9.   return 'hre' 

此处使用的是函数,也可以直接使用变量。

原文链接:https://www.toutiao.com/a7035921385008415264/

延伸 · 阅读

精彩推荐
  • vue.jsVue项目中实现带参跳转功能

    Vue项目中实现带参跳转功能

    最近做了一个手机端系统,其中遇到了父页面需要携带参数跳转至子页面的问题,现已解决,下面分享一下实现过程,感兴趣的朋友一起看看吧...

    YiluRen丶4302022-03-03
  • vue.js梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    看过很多人讲vue的生命周期,但总是被绕的云里雾里,尤其是自学的同学,可能js的基础也不是太牢固,听起来更是吃力,那我就已个人之浅见,以大白话...

    CRMEB技术团队7992021-12-22
  • vue.js用vite搭建vue3应用的实现方法

    用vite搭建vue3应用的实现方法

    这篇文章主要介绍了用vite搭建vue3应用的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    Asiter7912022-01-22
  • vue.jsVue2.x 项目性能优化之代码优化的实现

    Vue2.x 项目性能优化之代码优化的实现

    这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋...

    优小U9632022-02-21
  • vue.jsVue多选列表组件深入详解

    Vue多选列表组件深入详解

    这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...

    yukiwu6752022-01-25
  • vue.jsVue2.x-使用防抖以及节流的示例

    Vue2.x-使用防抖以及节流的示例

    这篇文章主要介绍了Vue2.x-使用防抖以及节流的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Kyara6372022-01-25
  • vue.jsVue中引入svg图标的两种方式

    Vue中引入svg图标的两种方式

    这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    十里不故梦10222021-12-31
  • vue.js详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Latteitcjz6432022-02-12