Vue3 插槽 Slots 的使用

我们使用的插槽主要分为三种

• 默认插槽

• 具名插槽

• 作用域插槽

默认插槽

我们在实现组件通讯的时候, 也是可以使用插槽来实现通信的

怎么来实现呢?

我们先来做一下准备工作

这三个卡片都是一个组件, 只是, 我们想让他显示不同的内容, 再使用props传递, 就不太容易了, 过去再用v-if去判断, 显示不同的结构不是很优的解决办法

这里使用插槽会容易一些

我们先将标题渲染出来

我们在Son组件中进行接收

这样, 我们的标题就呈现出来了

我们在父组件中再定义几组数据

数据, 我们是定义好了, 但是, 我们怎么传递过去呢

其实, 我们可以将组件改为双标签

我们在组件中间写了一个img标签, 我们看看能不能展示

并没有展示, 这是怎么回事呢?

其实vue检测出了Son的开始标签和结束标签, 它知道要渲染这个组件中的内容, 但是呢, 他又检测出, 你的组件中间有内容, 他不知道你这个内容要在哪里显示, 所以, 它采用了极端的方法将其丢弃

这时候, 我们就需要使用一个内置组件, 告诉Vue, 我要在这里展示, 这个组件就是slot插槽组件

这样, 我们再看一下, 是不是显示出来了

其他的, 我们也就知道该如何处理了

我们看看页面呈现

对于这种情况, 我们就不用封装那么多组件了, 使用一个组件配合插槽, 我们就很容易实现一个组件复用的效果

具名插槽

具名插槽, 顾名思义就是具有名字的插槽

我们还是用上面这个案例

什么情况下要使用具名插槽呢?

比如, 我们有三组图片, 但是你只有一个坑位, 肯定是不行的, 我们要在不同的地方展示不同的图片, 这个时候 我们就要给插槽起名字了

我们先来准备三张图片

这样写确实可以呈现出来

但是, 想要打乱顺序

让猫在最上面, 名画在中间, 狗在最下面, 貌似我们只能改代码顺序来实现

其实, 这里可以使用具名插槽

我们给插槽起了三个名字

貌似内容都没有了

这时候, 我们需要添加v-slot指令

貌似, 飘红了, 我们看看是什么错

他说, 这个指令只能用在组件标签或者template身上

这样, 我们再看看

貌似出来了

我们依次添加上指令

这时候, 我们再看看效果

我们使用具名插槽就实现了这种效果

作用域插槽

作用域插槽可以这样理解, 我们子组件创建一些数据, 然后父组件需要使用这些数据, 直接拿来用还不行, 会报警告, 这就是一种类似的作用域问题

我们来模拟一下

我们定义了三组数据, 但是呢, 我们父组件直接使用会报错

那么, 我们怎么才能用到子组件中的数据呢?

我们需要使用props的方式将数据传递给插槽的使用者

这时候, 我们父组件如何接收呢?

这个params就是所有的props组成的一个对象

那么, 这样我们就可以访问到图片信息了

这样, 我们的图片就展示出来了

这就是作用域插槽的使用

今天, 我们就讲解到这里

我们下期见

原文始发于微信公众号（一个不正经的黑客）：Vue3 插槽 Slots 的使用