Vue插槽slot详细介绍(对比版本变化,避免踩坑)

Vue中的插槽（slot）在项目中用的也是比较多的，今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化。

插槽是什么？

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。以下举例子帮助理解。

怎么使用插槽？

基本用法

现在，有两个组件，A与B，分别如下：

A.vue

B.vue

将B组件引入A组件里面（此时B为A的子组件）

页面效果如下：

准备工作完毕，现在，在B组件里面使用插槽（slot）

此时页面并无变化（最开始的情况），当然，B组件中使用了插槽slot之后，相当于留下了一个“坑”，占了个位置。 那么如何验证其存在了呢？

此时，修改A组件里面的代码

此时页面的效果如下：

页面中多出了在A中用B包裹的内容。没错，这就是插槽的基本使用，是不是很简单？

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

如上面的例子，当组件渲染的时候， 将会被替换为“验证插槽是否生效”（即指定内容）。插槽内可以包含任何模板代码，包括 HTML：

页面效果如下：

插槽内也可以放其他组件，如此时再新建一个组件C：

在A组件中，将B组件包裹的内容换成C组件：

页面效果如下：

此时检查页面元素，我们会发现，在原本B组件中的位置，替换成了C组件：  

//B.vue  //观察页面元素,被替换成C组件

也印证了开篇对插槽作用的解释，即使用的组件指定的位置留一个坑，如果在外部，使用其组件包裹某内容（可以是任何模板代码，也可以是HTML，还可以是组件），则该内容就会被分发到处（一个有趣的说法就是把“坑”补上），渲染出来。当然，也可以不放任何内容，不影响组件渲染，就好比最开始的情况。

注意：如果B组件的 template 中没有包含一个  元素，即不使用插槽，则该组件起始标签和结束标签之间的任何内容都会被抛弃。例如：

//B.vue 

//A.vue  //此时在包裹的内容都会被抛弃

页面效果如下，在B组件中插入的C组件被抛弃了，因为B组件中没使用插槽：

后备（默认）内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在B组件中：

我们可能希望这个B组件内绝大多数情况下都渲染文本“我是B组件”。为了将“我是B组件”作为后备内容，我们可以将它放在  标签内：

现在当我在一个父级组件中使用B组件并且不提供任何插槽内容时：

后备内容“我是B组件”将会被渲染：

但是如果我们提供内容： 

 
我是插槽内容

则这个提供的内容将会被渲染从而取代后备内容： 

具名插槽

所谓具名插槽，顾名思义就是起了名字的插槽。有时我们需要多个插槽，例如当我们想使用某种通用模板：

对于这样的情况， 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽： 

//B.vue 

一个不带 name 的  出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个