Vue3中插槽(slot)用法汇总(推荐)

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

什么是插槽

简单来说就是子组件中的提供给父组件使用的一个 坑位 ,用  表示,父组件可以在这个坑位中填充任何模板代码然后子组件中  就会被替换成这些内容。比如一个最简单插槽例子

//父组件



//子组件Child

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

Vue3中插槽(slot)用法汇总(推荐)_第1张图片

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

//父组件

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

Vue3中插槽(slot)用法汇总(推荐)_第2张图片

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

默认内容

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

//子组件


//父组件1



//父组件2

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

Vue3中插槽(slot)用法汇总(推荐)_第3张图片

父组件2 展示提供的内容

Vue3中插槽(slot)用法汇总(推荐)_第4张图片

具名插槽

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