Vue3中插槽(slot)的全部使用方法

目录

• 什么是插槽
• 默认内容
• 具名插槽
• 动态插槽名
• 作用域插槽
• 作用域插槽
• 具名作用域插槽
• 写在最后

Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是它的所有用法你是否全部理解呢？本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。

什么是插槽

简单来说就是子组件中的提供给父组件使用的一个坑位，用 表示，父组件可以在这个坑位中填充任何模板代码。

比如一个最简单插槽例子：

//父组件



//子组件Child

子组件中的 便是父组件放在子组件标签之间的内容。当然这之间你可以传入任何代码片段，都会被放到这个位置。

同样的你也可以在标签之间放入变量，比如

//父组件

先解释一下后面频繁出现的两个词 插槽和插槽内容，防止后面阅读搞混了：

同样的 插槽表示的就是这个msg变量。所以子组件 插槽是可以访问到父组件的数据作用域，而插槽内容是无法访问子组件的数据（即父组件中两个之间是不能使用子组件中的数据的），这就是所谓的渲染作用域。后面会介绍插槽向插槽内容传参的方式

默认内容

在父组件没有提供任何插槽内容的时候，我们是可以为子组件的插槽指定默认内容的，比如

//子组件


//父组件1



//父组件2

此时父组件1展示默认内容

父组件2展示提供的内容

具名插槽

很多时候一个 插槽满足不了我们的需求，我们需要多个 插槽。于是就有了具名插槽，就是具有名字的 插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑，让它们呆在该呆的位置去。比如带 name 的插槽 被称为具名插槽。没有提供 name 的  会隐式地命名为“default”。在父组件中可以使用v-slot:xxx（可简写为#xxx） 指令的