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

以你之姓@ 2023-10-05 18:21 19阅读 0赞

# **目录** #

一、插槽slot

1、编译作用域

2、为什么使用slot

slot翻译为插槽：

组件的插槽：

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

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

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

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

4、slot基本使用

如何使用slot？

例子：

5、具名插槽slot

6、作用域插槽：准备

7、作用域插槽：使用

--------------------

# 一、插槽slot #

## 1、编译作用域 ##

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

`<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站为例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

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

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

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

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

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

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

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

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

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

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

## 4、slot基本使用 ##

### 如何使用slot？ ###

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

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

### 例子： ###

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

## 5、具名插槽slot ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

## 6、作用域插槽：准备 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

## 7、作用域插槽：使用 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210124154834181.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2021012415485116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210124154910793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210124154931894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210124154957396.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2021012415502299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70