Vue-几种插槽(slot)的使用

悠悠 2023-10-12 19:37 37阅读 0赞

# 插槽(slot) #

插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式

一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明

## 1 基本案例 ##

首先编写一个基本的案例，三个组件展示不同的数据类型

![8724026d32c322f0e70c3694d2cf49c5.png][]

页面进行展示

![2bafb7fd530ae1b2d9e2576c9ad556e8.png][]

现在要改需求，美食的列表只展示一个海报图片，电影则展示一段宣传视频，游戏则不变

如果要按照美食的需求去改统一加上照片

![b990aec72c72d024755ceb2a208536cc.png][]

那么三个列表都有了这个照片

![fd7f39597d81207b9e32accd0c62e9e8.png][]

当然可以使用v-show判断

![feb162313edda68408a82e7c13054019.png][]

虽然可以实现效果，但是比较麻烦，而且电影的列表如果也按照这样判断，那么代码维护性特别低，逻辑非常混乱

![13d46418380bb1d9c690aec7c577c0f4.png][]

这时候就可以使用插槽了

## 2 插槽的基本使用 ##

所谓插槽，其实就是挖个坑，等着使用者进行填充

下面的案例是一个最基本的单个插槽使用，也叫默认插槽

比如下面我改造了下代码，在组件标签里面写一个doc元素

![a46c4c896125240077b96ae3d7e7aa9f.png][]

但是查看的时候发现什么都没有

![dc4aac2f200bfb56506afa1154156bc8.png][]

这是因为虽然定义了元素，但是vue不知道去组件哪个地方填充，这个时候我们需要在被需要填充的组件里面定义一个插槽(slot)标签

![8a890166ddbbe25dc6a883314f2ac295.png][]

![8b30729fc95f046a76adbc1cbc069e4e.png][]

这样我就可以只需要一个插槽，对不同的组件进行不同的元素展示了，如下

![00117296ba21aca753ae9e1a170728b4.png][]

图片，列表，视频，我想要什么就定义什么，组件只需要一个插件接收即可，这样就能实现动态展示同一个组件不同的数据

![edc2b6484ea35045d9e5d496ae1e192c.png][]

值得注意点是，虽然通过组件标签把数据和资源传输到了组件中并使用插槽进行展示，但是都是通过app这个组件进行传输的，所以对元素的样式控制，完全可以在app.vue里面处理完之后再传递

![24c2f13b0859bcf9e81f22866f3d0f98.png][]

当然如果非要把样式在用到插槽的组件中进行处理，也是没问题的

![3e5770919f43b0f754925e98cd3ff564.png][]

不管在那处理，都是一样的

![b91cd213410114404e64ff8746010617.png][]

### 插槽的默认值 ###

插槽是可以定义默认值的，当没有对插槽进行填充的时候，就会展示默认值，如下所示我把组件里面的内容注释掉了，这时候就会出现插槽的默认值：

![1c7a3e5fc31bd40472011efcf57630e9.png][]

图片被默认值取代了

![2ac10abdd57e2a1bb8f0d3d7dd19eab6.png][]

## 3 具名插槽 ##

默认插槽是插槽家族中最简单的使用方式，下面的具名插槽则是比它稍微复杂些的一个使用方式

顾名思义，它指的是具有名字的插槽

所以改下上面的需求，在原有的基础上，加入更多的元素，通过另外一个插槽实现，也就是多个插槽

如果直接复制一个默认插槽，肯定是不行的

![7cfa070baf1914b974dbd55bdf221583.png][]

发现全部的元素都出现了两份，这不是我们想要的效果

![2ee927f6101120efa150ca54003a856c.png][]

插槽确实需要些多个，但是需要name指定插槽的名称

![f6526bfad93e861f2a1c35f64a462aff.png][]

但是发现还是不行

![25041f138d1b5cf63d536755aa23e243.png][]

因为虽然给插槽命名了名称，但是插入内容的时候并没有告诉对应的插槽，所以需要使用slot属性去标识具体的插槽

![5c4f4baac81ff2431a47fc32ba0d80bd.png][]

![a1418952877110ee83452645807e412d.png][]

### 多个插值小技巧 ###

如果有多个元素需要使用同一个插槽是不会进行数据覆盖的，这种情况我们可以定义一个div，然后在div中指定插槽的name

![0db745dec7366e4d55e6f6fd17f2ed70.png][]

![a11ea1475ec222d17e5d3a497c1bb0a2.png][]

一样的效果

![233e2dc7f013f72b9bf401e04d5ef6bf.png][]

### template使用技巧 ###

如果想要多个元素并且不想再多生成一个无用的div，可以使用template标签

![3d7f35806b3c40018a4ff552aeb1cbbe.png][]

![4d056152641d3d0bf0dc1b8632abcd29.png][]

### template的v-slot写法 ###

一旦使用了template标签，就有了第二种写法了，这是vue2.6提出来的，v-slot:xxx

![9ba002de5716ba06c61a14cadf3e7df3.png][]

v-slot的写法只能作用于template标签上，不信你看，这里我加到了div身上

![b1d54241c1b9c0d436515cc66c67149e.png][]

直接报错了

![282628dc9e3b3bc8379b8181ef38c6e1.png][]

以上就是具名插槽的用法了

## 4 作用域插槽 ##

说完了默认插槽和具名插槽，接下来就是插槽的最后一种用法：作用域插槽

说到作用于大多数人想到的是js的作用域，这个作用域插槽还真和js的作用域有几分相似

现在有一个需求，根据菜单生成的数据还是一样的数据，但是展示方式不同

![f9ee5422c33220e2f032df00e01e5ec6.png][]

比如第一个列表还是无序的，第二个列表是有序的，第三个列表则要把游戏名称以h4的形式展现

这时候就可以借助作用域插槽了

如果正常写

![8a1e39f8e07bb8f354eb06bbf49e5fad.png][]

会报错，表示找不到games

![f62169483bc079d35af78b4dd5e5892b.png][]

这就是一个作用域的问题，我们传递了games，需要在接收方定义template使用scope属性进行接收

![e183fad43335df9df2c549a77d15252f.png][]

![6dd771618ae9bdce23c6a54598c2854a.png][]

### 另外一种写法 ###

老是写传递的参数有点烦，就可以使用这种写法

![8b8a079e01221770b1fcc1e2939dd369.png][]

### 传递多个属性 ###

不止可以传递一个属性，比如：

![1869a9b2be3140f52e0a83c088c27577.png][]

![5cbec68b505e1451e4ac8711b7c98e23.png][]

效果都是一样的

## 5 插槽总结 ##

1.  作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 **父组件 ===> 子组件** 。
2.  分类：默认插槽、具名插槽、作用域插槽
3.  使用方式：

*  1 默认插槽：
 *      父组件中：
                <Category>
                   <div>html结构1</div>
                </Category>
        子组件中：
                <template>
                    <div>
                       
                       <slot>插槽默认内容...</slot>
                    </div>
                </template>

2 具名插槽：

父组件中：
            <Category>
                <template slot="center">
                  <div>html结构1</div>
                </template>
    
                <template v-slot:footer>
                   <div>html结构2</div>
                </template>
            </Category>
    子组件中：
            <template>
                <div>
                   
                   <slot name="center">插槽默认内容...</slot>
                   <slot name="footer">插槽默认内容...</slot>
                </div>
            </template>

*  3 作用域插槽
 *  1 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
 *  2 具体编码：
 *      父组件中：
                        <Category>
                                <template scope="scopeData">
                                        
                                        <ul>
                                                <li v-for="g in scopeData.games" :key="g">{
             {g}}</li>
                                        </ul>
                                </template>
                        </Category>
        
                        <Category>
                                <template slot-scope="scopeData">
                                        
                                        <h4 v-for="g in scopeData.games" :key="g">{
             {g}}</h4>
                                </template>
                        </Category>
        子组件中：
                <template>
                    <div>
                        <slot :games="games"></slot>
                    </div>
                </template>
                        
                <script>
                    export default {
                        name:'Category',
                        props:['title'],
                        //数据在子组件自身
                        data() {
                            return {
                                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                            }
                        },
                    }
                </script>

[8724026d32c322f0e70c3694d2cf49c5.png]: https://img-blog.csdnimg.cn/img_convert/8724026d32c322f0e70c3694d2cf49c5.png
[2bafb7fd530ae1b2d9e2576c9ad556e8.png]: https://img-blog.csdnimg.cn/img_convert/2bafb7fd530ae1b2d9e2576c9ad556e8.png
[b990aec72c72d024755ceb2a208536cc.png]: https://img-blog.csdnimg.cn/img_convert/b990aec72c72d024755ceb2a208536cc.png
[fd7f39597d81207b9e32accd0c62e9e8.png]: https://img-blog.csdnimg.cn/img_convert/fd7f39597d81207b9e32accd0c62e9e8.png
[feb162313edda68408a82e7c13054019.png]: https://img-blog.csdnimg.cn/img_convert/feb162313edda68408a82e7c13054019.png
[13d46418380bb1d9c690aec7c577c0f4.png]: https://img-blog.csdnimg.cn/img_convert/13d46418380bb1d9c690aec7c577c0f4.png
[a46c4c896125240077b96ae3d7e7aa9f.png]: https://img-blog.csdnimg.cn/img_convert/a46c4c896125240077b96ae3d7e7aa9f.png
[dc4aac2f200bfb56506afa1154156bc8.png]: https://img-blog.csdnimg.cn/img_convert/dc4aac2f200bfb56506afa1154156bc8.png
[8a890166ddbbe25dc6a883314f2ac295.png]: https://img-blog.csdnimg.cn/img_convert/8a890166ddbbe25dc6a883314f2ac295.png
[8b30729fc95f046a76adbc1cbc069e4e.png]: https://img-blog.csdnimg.cn/img_convert/8b30729fc95f046a76adbc1cbc069e4e.png
[00117296ba21aca753ae9e1a170728b4.png]: https://img-blog.csdnimg.cn/img_convert/00117296ba21aca753ae9e1a170728b4.png
[edc2b6484ea35045d9e5d496ae1e192c.png]: https://img-blog.csdnimg.cn/img_convert/edc2b6484ea35045d9e5d496ae1e192c.png
[24c2f13b0859bcf9e81f22866f3d0f98.png]: https://img-blog.csdnimg.cn/img_convert/24c2f13b0859bcf9e81f22866f3d0f98.png
[3e5770919f43b0f754925e98cd3ff564.png]: https://img-blog.csdnimg.cn/img_convert/3e5770919f43b0f754925e98cd3ff564.png
[b91cd213410114404e64ff8746010617.png]: https://img-blog.csdnimg.cn/img_convert/b91cd213410114404e64ff8746010617.png
[1c7a3e5fc31bd40472011efcf57630e9.png]: https://img-blog.csdnimg.cn/img_convert/1c7a3e5fc31bd40472011efcf57630e9.png
[2ac10abdd57e2a1bb8f0d3d7dd19eab6.png]: https://img-blog.csdnimg.cn/img_convert/2ac10abdd57e2a1bb8f0d3d7dd19eab6.png
[7cfa070baf1914b974dbd55bdf221583.png]: https://img-blog.csdnimg.cn/img_convert/7cfa070baf1914b974dbd55bdf221583.png
[2ee927f6101120efa150ca54003a856c.png]: https://img-blog.csdnimg.cn/img_convert/2ee927f6101120efa150ca54003a856c.png
[f6526bfad93e861f2a1c35f64a462aff.png]: https://img-blog.csdnimg.cn/img_convert/f6526bfad93e861f2a1c35f64a462aff.png
[25041f138d1b5cf63d536755aa23e243.png]: https://img-blog.csdnimg.cn/img_convert/25041f138d1b5cf63d536755aa23e243.png
[5c4f4baac81ff2431a47fc32ba0d80bd.png]: https://img-blog.csdnimg.cn/img_convert/5c4f4baac81ff2431a47fc32ba0d80bd.png
[a1418952877110ee83452645807e412d.png]: https://img-blog.csdnimg.cn/img_convert/a1418952877110ee83452645807e412d.png
[0db745dec7366e4d55e6f6fd17f2ed70.png]: https://img-blog.csdnimg.cn/img_convert/0db745dec7366e4d55e6f6fd17f2ed70.png
[a11ea1475ec222d17e5d3a497c1bb0a2.png]: https://img-blog.csdnimg.cn/img_convert/a11ea1475ec222d17e5d3a497c1bb0a2.png
[233e2dc7f013f72b9bf401e04d5ef6bf.png]: https://img-blog.csdnimg.cn/img_convert/233e2dc7f013f72b9bf401e04d5ef6bf.png
[3d7f35806b3c40018a4ff552aeb1cbbe.png]: https://img-blog.csdnimg.cn/img_convert/3d7f35806b3c40018a4ff552aeb1cbbe.png
[4d056152641d3d0bf0dc1b8632abcd29.png]: https://img-blog.csdnimg.cn/img_convert/4d056152641d3d0bf0dc1b8632abcd29.png
[9ba002de5716ba06c61a14cadf3e7df3.png]: https://img-blog.csdnimg.cn/img_convert/9ba002de5716ba06c61a14cadf3e7df3.png
[b1d54241c1b9c0d436515cc66c67149e.png]: https://img-blog.csdnimg.cn/img_convert/b1d54241c1b9c0d436515cc66c67149e.png
[282628dc9e3b3bc8379b8181ef38c6e1.png]: https://img-blog.csdnimg.cn/img_convert/282628dc9e3b3bc8379b8181ef38c6e1.png
[f9ee5422c33220e2f032df00e01e5ec6.png]: https://img-blog.csdnimg.cn/img_convert/f9ee5422c33220e2f032df00e01e5ec6.png
[8a1e39f8e07bb8f354eb06bbf49e5fad.png]: https://img-blog.csdnimg.cn/img_convert/8a1e39f8e07bb8f354eb06bbf49e5fad.png
[f62169483bc079d35af78b4dd5e5892b.png]: https://img-blog.csdnimg.cn/img_convert/f62169483bc079d35af78b4dd5e5892b.png
[e183fad43335df9df2c549a77d15252f.png]: https://img-blog.csdnimg.cn/img_convert/e183fad43335df9df2c549a77d15252f.png
[6dd771618ae9bdce23c6a54598c2854a.png]: https://img-blog.csdnimg.cn/img_convert/6dd771618ae9bdce23c6a54598c2854a.png
[8b8a079e01221770b1fcc1e2939dd369.png]: https://img-blog.csdnimg.cn/img_convert/8b8a079e01221770b1fcc1e2939dd369.png
[1869a9b2be3140f52e0a83c088c27577.png]: https://img-blog.csdnimg.cn/img_convert/1869a9b2be3140f52e0a83c088c27577.png
[5cbec68b505e1451e4ac8711b7c98e23.png]: https://img-blog.csdnimg.cn/img_convert/5cbec68b505e1451e4ac8711b7c98e23.png