组件化开发中的常用的插槽(slot)元素

本是古典何须时尚 2022-12-11 04:21 71阅读 0赞

> 详细请阅读官方文档——[插槽官方文档][Link 1]

# 1. 什么是插槽？ #

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

# 2. 插槽的使用方法 #

举个例子，下面是京东app的两个界面，注意他的导航栏。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70][]         ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 1][]

两个导航栏整体是几乎相同的，只有文本和一些按钮不同。我们都知道程序员不可能写两个导航栏吧，因为懒！哈哈，开个玩笑，那么这其实就是使用同一个导航栏组件，通过插槽元素实现不同的导航栏效果。

![20201002174509956.jpg][]

![20201002174522660.jpg][]

##  1. 基础slot示例代码： ##

比如，一个弹出框组件，它有三处应用，需要更改按钮处的元素。

<template id="cpn">
        <div>
            <h2>我是子组件</h2>
            <slot><button>按钮</button></slot>
        </div>
    </template>

运行结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 2][]

## 2. 具名插槽使用方法： ##

顾名思义，有名字的插槽就是具名插槽，就是我之前说的导航栏。

简单示例如下：

我有一个导航栏组件，分别把它左中右处的插槽起个name：

调用组件，修改指定位置的元素：

运行结果如下：

![20201011154259937.png][]

## 3.作用域插槽 ##

理解：父组件替换插槽的标签，但是标签内容是由子组件提供的。

> 举个例子：子组件包括一组数据：比如，pColor:\['red','green','yellow','black'\]; 我们要在以不同的方式显示这组数据（比如，行显示或列显示）。
> 
> 通过父组件修改标签，内容还在子组件。

这就需要使用slot作用域插槽来实现。

代码如下：子组件

代码中，:data=“pColor”就是将子组件的数组存到data中。（data是名字，随便起）。

代码：父组件

父组件中，需要使用slot-scope属性获取刚才的data值。（同样代码中slot是名字也可以随便起）。

结果：

![20201011161616578.png][]

[Link 1]: https://cn.vuejs.org/v2/guide/components-slots.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201002174159635.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 1]: /images/20221123/1a0ae2a874f24aa5bbf8f51fa8d47b4a.png
[20201002174509956.jpg]: /images/20221123/16d6ac1ae672495e848b158257f4f87e.png
[20201002174522660.jpg]: /images/20221123/2ef1480b01c74e7bba189bfb2c5f626b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 2]: /images/20221123/16b39468ba56430eaddb64eca5e7c2ad.png
[20201011154259937.png]: /images/20221123/826adfd9f13e4840a787fb3abdfe73fe.png
[20201011161616578.png]: /images/20221123/829583912a7b4370b1b7ffd4945af966.png