Vue3 _ 19. Vue 插槽

一、什么是插槽

来看一下官方是如何定义的

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

可以说，完全看不懂。。。

这里我给大家简单说一下，这个插槽，其实就是一个占位置的坑，把坑挖好，之后其他的人没有办法使用，到时候我们可以动态做替换，把这个坑换成其他的东西。

二、HelloWorld

我们这里来看一个简单的例子，感受一下插槽是如何使用的。

首先，我们去定义一个非常简单的组件

接着，我们把这个组件注册到我们的 App.vue 中

然后我们来运行一下，看看效果~

其实就是这个样子，很简单。

但是如果我们在这个标签中再去嵌套一个 div，我们再来看看效果

不难发现，这个 哈哈哈哈 并没有被展示出来。

这里呢，我们就可以使用插槽这个东西了，我们在子组件中将这个插槽添加上，再来看看效果。

可以看到，这个 哈哈哈哈 显示出来了，这个就是因为插槽提前占了一个坑，这里我们可以动态做替换~~~ 

三、渲染作用域

这里我们直接去看官网的例子，只需要记住一句话即可：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

四、具名插槽

这个具名插槽是我们以后比较常用的一种方式，好比我们现在在子组件中定义两个插槽，那么我们这个父组件中的内容如何去对应坑位呢？

这里其实我们是使用 name 来进行区分的，来看一下。

Lemon1234_slot.vue

子组件弄好之后，我们再来看父组件。父组件中我们之前是写了一个 div，但是，对于这个具名插槽，我们是没有办法使用 div 的，它这个是强制要求我们使用 template，所以我们需要将div 改成 template，顺便再复制一个

但是还没有玩，我们还需要指定插槽对应的位置，这里我们需要在 template 上加一个属性：v-slot:slot的name

我们保存运行一下，看看效果

可以看到，是 ok 的啊~~~

五、作用域插槽、动态插槽名、具名插槽缩写

这些大家可以自己去官网看一下，学一波，其实和上面的具名插槽及其类型

这一篇东西不多，自己动手练习一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~