app自定义图标 vue_Vue学习笔记-05 插槽是组件的扩展

关于组件相关的内容，我们只剩下最后一个知识点，那就是插槽。

插槽是什么

官方对插槽( slot )的定义是：一套用来分发内容的API。更简单的理解是，插槽是一个更复杂的属性，不仅仅可以是变量，还可以是 HTML 标签，这些复杂的属性通过插槽的方式传递给组件。

插槽的用法

还是回到我们之前的 MyComponent 组件，假设我们要在文字下边添加一些内容，但是现在我们并不知道这个内容是什么，可能是一个文字，可能是一个图标，也可以一个按钮，甚至有可能是一个自定义组件。这时候我们就可以使用插槽：

--------------- MyComponent.vue ----------------

MyComponent {{msg}}

--------------- App.vue ----------------

这是一个插槽

效果展示：

如果我们把文字换成按钮：

--------------- App.vue ----------------

这是一个插槽按钮

效果展示：

可以看到，插槽要分发的内容是写在组件的标签中的，而显示的位置，则需要在组件中使用 标签来声明。

插槽的语法有点像一个占位符，告诉组件这个地方有一个内容我不知道是什么，具体显示什么由外面来告诉我。

插槽的特性

除了上面插槽最简单最基本的用法外，插槽还有一些特殊用法。接下来我们一一过一下：

• 编译作用域

插槽可以使用数据，但是要注意作用域。官方文档有一个规则：

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

也就是说，你能使用的数据是当前组件作用域内的数据。

• 后备内容

后备内容其实就是默认值，我们可以在 标签中，填写默认值，当没有给插槽传递数据时，就会显示默认值。

• 具名插槽

有时候我们需要多个插槽，这时候，为了区分多个插槽，需要给插槽一个标识，即名字。我们在给插槽传递数据的时候，标识插槽的名字，然后在使用时，也通过名字来排列，就可以使用多个插槽。

还是用我们之前的 MyComponent 做个示例：

--------------- App.vue ----------------

我来组成头部

我来组成尾部

--------------- MyComponent.vue ----------------

这是头部默认值

MyComponent {{msg}}

这是尾部默认值

运行以后的效果如下：

这里有一点要简单说明，我们前面的插槽并没有指定名字，但是实际上， vue 中没有指定名字的插槽都有一个默认的名字： default 。

2.6.0之后，vue 新增了具名插槽的缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。

• 作用域插槽

插槽获取数据是有作用域的，但如果我们就要获取子组件的数据，这时候就需要作用域插槽来实现这个能力。

需要在子组件的 标签中绑定对应的数据：

--------------- MyComponent.vue ----------------

这是头部默认值

MyComponent {{msg}}

这是尾部默认值

然后在父组件中接收，然后使用：

我来组成头部{{MyComponentSlot.info}}

我来组成尾部

运行效果展示：

• 动态插槽名

插槽的名字也可以使用变量而不是固定值：

--------------- App.vue ----------------

我来组成头部{{MyComponentSlot.info}}

我来组成尾部

组件总结

插槽我觉得是组件的一种扩展，扩大了组件的边际，让组件能够承载更多的功能。我们只是学习了插槽的冰山一角，实际上插槽能够实现更加酷炫的能力，以后再慢慢加深理解。

至此，我已经把 vue 组件相关的知识全部学完了。学到这里，感觉以前生涩难懂的代码都有迹可循了。这部分内容我认为应该就是 vue 的核心知识了。掌握了这一部分，剩下的内容学起来也会更轻松一点。

接下来，我会继续学习 vue 的生态，把 vue 的技术体系搭建起来，这是一个完整项目所需要的各方面能力。​