Vue插槽

插槽

一、 默认插槽

插槽的定义：

简单理解就是组件内部留一个或多个的插槽位置，可供组件传对应的模板代码进去。再通过对模板代码进行解析到页面展示

（类似于你往页面里面挖了个坑，然后等组件的使用者去填充）

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

默认插槽的操作就是在想要展示的地方用<slot></slot>标签来挖个“坑”，让代码知道该往哪放。

举个例子，现在我有个需求，我有两个vue组件，App父组件和Category子组件

在App组件中使用List组件的时候我引入了图片元素，我想让Category接收我这个图片元素，同时在原有的数据下方展示，这个时候我们就可以使用该默认插槽的方式；

App组件的引用：

 <template>
     <div class="container">
         <Category title="美食" >
             <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.s6dpfSeTuglKhh1UbDEZDQHaE8?w=296&h=197&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="">
         </Category>
 ​
         <Category title="游戏" >
             <ul>
                 <li v-for="(g,index) in games" :key='index'>{{ g }}</li>
             </ul>
         </Category>
 ​
         <Category title="电影" >
             <video controls src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
         </Category>
     </div>
 </template>

Category组件的接收：

 <template>
     <div class="category">
         <h3>{{title}}</h3>
         <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
         <slot></slot>
     </div>
 </template>

这个时候Category组件就能把App中携带过来的数据放在我指定的位置<slot></slot>中

二、 具名插槽

具名插槽，顾名思义就是带有自己名字的插槽，很好理解的就是我现在有多个插槽内容，每个内容有自己的位置（也就是对应自己的坑），接下来就是代码演示

App组件的引用：

<template>
     <div class="container">
         <Category title="美食" >
             <img slot="content" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.s6dpfSeTuglKhh1UbDEZDQHaE8?w=296&h=197&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="">
             <a slot="footer" href="https://www.baidu.com">更多美食</a>
         </Category>
 ​
         <Category title="游戏" >
             <ul slot="content">
                 <li v-for="(g,index) in games" :key='index'>{{ g }}</li>
             </ul>
             <div class="foot" slot="footer">
                 <a href="https://www.baidu.com">单机游戏</a>
                 <a href="https://www.baidu.com">网络游戏</a>
             </div>
         </Category>
 ​
         <Category title="电影" >
             <video slot="content" controls src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
             <template v-slot:footer>
                 <div class="foot">
                     <a href="https://www.baidu.com">经典</a>
                     <a href="https://www.baidu.com">热门</a>
                     <a href="https://www.baidu.com">推荐</a>
                 </div>
                 <h4>欢迎前来观影</h4>
             </template>

Category组件的接收：

<template>
     <div class="category">
         <h3>{{title}}</h3>
         <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
         <slot name="content"></slot>
         <slot name="footer"></slot>
     </div>
 </template>

不难发现，我给<slot></slot>添加了name属性，给两个插槽分别命名为content和footer，在App引用的时候同样给需要对应展示的标签中添加了slot=“xxx”的属性，xxx对应你想放的插槽

三、 作用域插槽

作用域插槽用在何种情况呢，上面两个案例的data数据我都是放在了App组件，但是如果遇到数据存放在Category组件的时候，就不可以直接访问到数据，因为存在数据作用域的问题，如何解决该问题正确拿到数据呢，那就来瞧瞧作用域插槽的操作

App组件的引用：

 <template>
     <div class="container">
 ​
 ​
         <Category title="游戏" >
             <template slot-scope="qiqi">
                 <ul>
                     <li v-for="(g,index) in qiqi.games" :key='index'>{{ g }}</li>
                 </ul>   
             </template>         
         </Category>
 ​
         <Category title="游戏" >
             <template slot-scope="qiqi">
                 <ol>
                     <li style="color: red;" v-for="(g,index) in qiqi.games" :key='index'>{{ g }}</li>
                 </ol>   
             </template>         
         </Category>
 ​
         <Category title="游戏" >
             <template slot-scope="qiqi">
                     <h4 v-for="(g,index) in qiqi.games" :key='index'>{{ g }}</h4>
             </template>         
         </Category>
 ​
 ​
     </div>
 </template>

在用到作用域插槽的时候，需要将传给子组件的部分用<template></template>包裹，这个不能丢，在该标签里面添加slot-scope=“xxx”,（老版是添加scope但是有兼容性的问题所有我这里用slot-scope），xxx为自定义，这里的xxx是一个接收数据的对象，所有要用里面的数据需要通过xxx.games的方式获取数据

---

Category组件的接收：

 <template>
     <div class="category">
         <h3>{{title}}</h3>
         <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
         <slot :games="games"></slot>
     </div>
 </template>
 ​

注意：：games=“xxx”通过该方法给父组件传数据

---

​

Category组件中的数据

 <script>
     export default {
         name: 'Category',
         props: ["title"],
         data() {
             return {
                 foods: ["火锅","烧烤","小龙虾","麻辣烫"],
                 games: ["穿越火线","绝地求生","地下城与勇士","英雄联盟"],
                 films: ["《大鱼海棠》","《大侦探皮卡丘》","《功夫》","《西游记》"]
         };
     }
             
     }
 </script>

适用场景分析：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）