开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
1. 什么是vue插槽：
首先，各位一定在工作中遇到过一种情况：我们项目中有很多页面，每个页面都需要一个提示框，提示框的风格样式都是一样的，都有一个取消和确定按钮，但是里面的文字和所要触发的效果却是不同的。这个时候其实可以用到一个插槽了，我们只需要写好一些样式和它自己本身指定的一些事件，那么剩下的事情，是完全可以交由调用这个组件的父组件来制定，而正好，这与插槽的设计理念一拍即合
2. 如何去写一个插槽：
首先，我们得写一个子组件，这个组件一定会被很多个父组件调用，放进去。 我们首先要写好样式 然后在子组件中，肯定有一个地方是由父组件去写的，那么就有一个地方是要被占用的，于是，出现了 关键字：slot
我们可以理解成 slot与template一样，都是占位符，只不过slot的占位符有一些特殊作用，就是这块地方的内容是由父组件可以指定的
好啦，现在恭喜你，我们已经完成了一个插槽的书写了，我们暂且为这个子组件起一个名字 就叫他 Message 吧
那么接下来，我们就要去父组件中使用他:（其实就是一个子组件的正常引用逻辑）
- import Message from "..."
- componets:{Message} 3.然后我们写在页面中。就是下面这个样子：
此时 你会发现，在message中我们多出了一个div、p 和a标签，那么大家可以想一想，这些内容会出现在哪里呢（我们之前在子组件写了slot哦）
没错！他会出现在slot中
所以最终的结果会是下面这个样子：
slot的位置被替换成我们父组件里面写的东西啦！
那么此时可能就会有同学有疑问了，假如我有两个地方需要父组件制定呢？
比如：我的标题和按钮需要父组件制定但是中间的内容却不替换，也就意味着我需要写两个slot。那么如何能让父组件区分这两个不同的插槽呢？
解决方案：具名插槽 和 写两个子组件呗（哈哈，其实也是钟解决方案，但是太麻烦喽）
哈哈，其实十分的简单，就是给插槽以名字。 有些对数据熟悉的同学其实都已经想到了，就是数据中的id， 那么此时我们就可以用名字来区分不同的slot了
子组件：
父组件：
父组件中需要写占位标签呀，这样我们才能知道要写给那个子组件，然后 v-slot: 的名称就是子组件中的name的属性值
嘿嘿，这里面放了一个小知识：大家可以看到：子组件中第二个slot其实我并没有写名字
但是我却在父组件第二个写了一个v-slot：default.
原因是：其实slot 默认是有名字的：即〈slot name=“default”〉 所以如果我们不写name的话 那么这个name默认就是default
最后一个知识点：# v-slot:head 可以简写为 #head 这样我们就不必每次都写一遍 v-slot了
3. 插槽扩展：
现在我们已经学会插槽了，但插槽往往却不是这么简单哒，我们可以想一想，如果我们给插槽加上事件，然后这个事件由父元素制定呢，嘿嘿嘿，是不是和elementUI的组件库很像呢，我们传入一些数据，然后把想要自己指定内容，这不就是一个通用组件嘛，
