Vue3学习笔记——slot的使用

在2.6.0中，vue引入了新的命名槽和作用于槽的统一语法：v-slot。它取代了较新版本中的插槽和插槽范围。本文主要介绍vue3中slot的使用。一、v-slot介绍v-slot只能用在模板或组件上，否则会报错。v-slot也是指令之一。使用示例：//父组件代码slot内容//组件模板v-slots的语法简化了slots和slot-scope作用域slots的功能，在代码上更加强大和高效。2.Anonymousslots当组件中只有一个slot时，可以不设置slot的name属性，v-slot也可以没有参数，但是v-slot也会在没有name的slot中有一个implicitslot属性包含“默认”。匿名槽使用：//组件调用槽内容//组件模板虽然v-slot没有设置参数，但不能删除，否则插槽内容无法正常渲染。3.namedslot当一个组件中有多个slot时，如果没有设置v-slot属性值，默认情况下会将元素插入到没有name属性值的slot组件中，以便将对应的元素放入指定位置，需要使用v-slot和name属性来匹配内容。命名槽用法：//父组件headcontentfoot//子组件

Namedslot缩写v-slot与v-bind和v-on指令一样，也有缩写。您可以将v-slot:缩写为#符号。上面提到v-slot:footer可以简写为#footer。上面的父组件代码可以简化为：HeadContentfoot注意：和其他命令一样，只有在有参数的情况下才能简写，否则无效。4.作用域插槽有时允许插槽内容访问仅在子组件中可用的数据是有用的。这是一种常见的情况，当组件用于呈现项目数组并且我们希望能够自定义每个项目的呈现方式时。要使子组件的属性在插槽内容上可用，您需要将属性绑定到插槽。然后在v-slot接收并定义插槽道具名称。使用示例：//插槽内容--{{slotProps.item}}序列号--{{slotProps.index}}//子组件代码五、动态槽名v-slot指令参数也可以是动态的,用于定义动态插槽名称。如：dynamicslotnameconstdd=()=>{return'hre'}这里用到了它是一个函数，也可以直接使用变量。