vue插槽详解,vue插槽用法
本文主要分享vue3的插槽使用总结。在2.6.0中，Vue为命名插槽和作用于插槽引入了新的统一语法：v-slot。它取代了新版本中插槽和插槽范围的应用。我们来看看文章的细节。
目录
一、v型槽介绍
第二，匿名槽
三。命名插槽
四。范围插槽
动词（verb的缩写）动态插槽名称
一、v-slot 介绍
V-slot只能在模板或组件上使用，否则将会报告错误。
v槽也是指令之一。
使用示例：
//父组件代码
儿童通讯
模板v槽：名称槽
槽内容
/模板
/child-com
//组件模板
插槽名称=名称插槽/插槽
v-slot的语法简化了slot和slot-scope slot的功能，功能更强大，代码效率更高。
二、匿名插槽
当组件中只有一个slot时，可以不设置slot的name属性，v-slot后也可以没有参数，但是v-slot在没有设置name属性的slot开口处也会有一个隐含的“默认”。
匿名插槽使用：
//组件调用
儿童通讯
模板v形槽
槽内容
/模板
/child-com
//组件模板
插槽/插槽
虽然v槽没有设置参数，但是不能删除，否则槽的内容无法正常渲染。
三、具名插槽
当一个组件中有多个插槽时，如果没有设置v-slot属性的值，该元素将被插入到插槽组件中，默认情况下不设置name属性的值。为了将相应的元素放在指定的位置，需要使用v-slot和name属性来对应内容。
具名插槽使用：
//父组件
儿童通讯
模板v形槽：标题
头
/模板
模板v形槽：主体
内容
/模板
模板v形槽：页脚
脚
/模板
/child-com
//子组件
差异
插槽名称=header/slot
插槽名称=body/slot
插槽名称=页脚/插槽
/div
具名插槽缩写：
V-slot和v-bind、v-on指令一样，也有缩写。您可以将v-slot:缩写为#。
比如上面的v-slot:footer可以缩写成#footer。
上述的父组件代码可以简化为：
儿童通讯
模板#标题
头
/模板
模板#主体
内容
/模板
模板#页脚
脚
/模板
/child-com
注意：和其他指令一样，只有在有参数的情况下才能缩写，否则无效。
四、作用域插槽
有时，让插槽的内容只对子组件中的数据可用是很有用的。当一个组件被用来呈现一个项目数组时，这是一种常见的情况。我们希望能够自定义每个项目是如何呈现的。
要使子组件上的属性在slot内容上可用，您需要将属性绑定到slot。然后在v槽接收并定义所提供槽的道具名。
使用示例：
//
儿童通讯
模板v-slot:header=slotProps
插槽内容-{{slotprops.item}}序列号-{{slotprops.index}}
/模板
/child-com
//子组件代码
模板
div v-for=(item，index) in arr :key=index
slot:item= item name= header :index= index /slot
/div
/模板
脚本设置
const arr=[1111 ， 2222 ， 3333]
/脚本
五、动态插槽名
v-slot指令参数也可以是动态的，用于定义动态槽名。
如：
儿童通讯
模板垂直插槽：[dd()]
动态插槽名称
/模板
/child-com
脚本设置
常量dd=()={
返回“hre”
}
这里用函数，也可以直接用变量。
关于Vue3插槽使用情况总结的这篇文章到此为止。有关Vue3插槽使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。