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

第Vue3中插槽(slot)的全部使用方法目录什么是插槽默认内容具名插槽动态插槽名作用域插槽作用域插槽具名作用域插槽写在最后

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

什么是插槽

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

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

//父组件

template

div

ChildHelloJuejin/Child

/div

/template

scriptsetuplang="ts"

importChildfrom'./Child.vue'

/script

//子组件Child

template

div

p1/p

slot/

p2/p

/div

/template

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

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

//父组件

template

div

Child{{msg}}/Child

/div

/template

scriptsetuplang="ts"

import{ref}from'vue'

importChildfrom'./Child.vue'

constmsg=ref('HelloJuejin')

/script

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

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

默认内容

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

//子组件

template

div

slot我是默认内容/slot

/div

/template

//父组件1

template

div

Child/Child

/div

/template

scriptsetup

importChildfrom'./Child.vue'

/script

//父组件2

template

div

ChildHelloJuejin/Child

/div

/template

scriptsetup

importChildfrom'./Child.vue'

/script

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

父组件2展示提供的内容

具名插槽

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

//子组件

template

div

!--大萝卜--

div

slotname="bigTurnip"/slot

/div

!--小萝卜--

div

slotname="smallTurnip"/slot

/div

!--中萝卜--

div

slotname="midTurnip"/slot

/div

/div

/template

//父组件

template

div

Child

!--#smallTurnip为v-slot:smallTurnip缩写--

template#smallTurnip

/template

template#midTurnip

/template

template#bigTurnip

/template

/Child

/div

/template

scriptsetup

importChildfrom'./Child.vue'

/script

所以父组件中无需在意顺序，只需要写好模板命好名，它就会自动去到它所对应的位置。

动态插槽名

动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。

//父组件

template

div

Child

!--等同于#smallTurnip--

template#[slotName]

/template

template#midTurnip

/template

template#bigTurnip

/template

/Child

/div

/template

scriptsetup

import{ref}from'vue'

importChildfrom'./Child.vue'

constslotName=ref('smallTurnip')

/script

作用域插槽

作用域插槽

上面说过插槽内容是无法访问子组件的数据的，但是如果我们想在插槽内容访问子组件的状态该怎么办呢？

其实插槽可以像对组件传递props那样，在slot标签绑定属性从而传递给父组件中的插槽内容。首先来看下默认插槽的传值方式

//子组件

template

div

slotpersonName="xiaoyue"age="18"/slot

/div

/template

//父组件

template

div

Childv-slot="slotProps"

Mynameis{{slotProps.personName}}andIam{{slotProps.age}}yearsoldthisyear

/Child

/div

/template

scriptsetup

importChildfrom'./Child.vue'

/script

你还可以以结构的形式获取slot提供的数据

template

div

Childv-slot="{personName,age}"

Mynameis{{personName}}andIam{{age}}yearsoldthisyear

/Child

/div

/template

注意不能绑定name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样

//父组件

template

div

Child

template#bigTurnip="bigTurnipProps"

{{bigTurnipProps.message}}

/template

/Child

/div

/template

scriptsetup

importChildfrom'.