【Vue.js】018-Vue组件：插槽slot

一、插槽slot

1、编译作用域

在真正学习插槽之前，我们需要先理解一个概念：编译作用域；

官方对于编译的作用域解析比较简单，我们自己来通过一个例子来理解这个概念：

我们来考虑下面的代码是否最终是可以渲染出来的：

<my-cpn v-show="isShow"></my-cpn>中，我们使用了isShow属性；

isShow属性包含在组件中，也包含在Vue实例中；

答案：最终可以渲染出来，也就是使用的是Vue实例的属性；

为什么呢？

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

而我们在使用<my-cpn v-show="isShow"></my-cpn>的时候，整个组件的使用过程是相当于在父组件中出现的。

那么他的作用域就是父组件，使用的属性也是属于父组件的属性。

因此，isShow使用的是Vue实例中的属性，而不是子组件的属性；

2、为什么使用slot

slot翻译为插槽：

在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽；

插槽的目的是让我们原来的设备具备更多的扩展性；

比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等；

组件的插槽：

组件的插槽也是为了让我们封装的组件更加具有扩展性；

让使用者可以决定组件内部的一些内容到底展示什么；

例子：移动网站中的导航栏

移动开发中，几乎每个页面都有导航栏；

导航栏我们必然会封装成一个插件，比如nav-bar组件；

一旦有了这个组件，我们就可以在多个页面中复用了；

但是，每个页面的导航是一样的吗？No，我以京东M站为例

3、如何封装这类组件呢？slot

如何去封装这类的组件呢？

它们也很多区别，但是也有很多共性；

如果我们每一个组件都单独去封装，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装；

但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等；

如何封装合适呢？抽取共性，保留不同

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽;

一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容；

是搜索框，还是文字，还是菜单。由调用者自己来决定；

这就是为什么我们要学习组件中的插槽slot的原因！

4、slot基本使用

如何使用slot？

在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽；

该插槽插入什么内容取决于父组件如何使用；

例子：

<slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容；

有了这个插槽后，父组件如何使用呢？

5、具名插槽slot

6、作用域插槽：准备

7、作用域插槽：使用