插槽作用
在讲插槽之前我们先来看个例子：
在父组件My.vue里，代码如下：
在子组件MyChild.vue里，代码如下:
运行跑起来，看下效果：
我们会发现，不用插槽时，组件里的p标签内容并不会显示出来，为了让它显示出来，我们可以在子组件MyChild.vue里用上插槽，如下所示:
再来看下效果：
此时组件里的p标签内容就全部显示出来了。
从上面例子就能看出来了，插槽具有占位作用，我们在需要把父组件里的子组件里添加一些DOM元素时就可以用到插槽了。
具名插槽
在讲具名插槽之前，还是先来看个例子
在父组件My.vue里，代码如下：
在子组件MyChild.vue里，代码如下:
现在我们想通过插槽实现浏览器上显示出，h2标签的内容显示在最上面，h1标签的内容显示在中间，p标签的内容显示在h1标签下方，也就是说想要显示出如下效果：
可能有同学会说了，直接在子组件MyChild.vue里的h1标签上方和下方各加一个插槽不就好喽，好，我们先试一下：
再来看下效果：
我们发现结果是在h1标签的上方和下方都出现了h2标签内容和p标签内容，不是我们想要的结果，这个时候就要用到我们的具名插槽了。
具名插槽，顾名思义，就是有具体名字的插槽，实现方法是先在子组件对应分发slot标签里，添加name="name名” 属性，其次父组件在要分发的标签里添加 slot="name名” 属性，然后就会将对应的标签放在对应的位置了。
针对上面的例子，我们可以这样用具名插槽解决：
在父组件My.vue里，代码如下：
在子组件MyChid.vue里，代码如下:
最后结果就是我们想要的结果了。
注意事项
在父组件My.vue里，代码如下:
子组件MyChild.vue里，代码如下:
最后效果如下:
那有同学会问，h2标签的样式写在哪个组件里呢？其实，h2标签样式写在哪个组件都可以，但是title变量的值只能写在父组件My.vue的data里，只能写在传递方的data里。
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。所以，以后我们就用v-slot指令表示插槽了。