十五、插槽 slot

总结在最后，这里先一步步说明插槽到底是个啥

1、先正常实现一个效果

1、效果图

2、项目结构

3、CODE

1、App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2、Category.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---

2、改需求了！（默认插槽）

此时一位帅气的项目经理屁颠屁颠的跑过来了，说：“小白啊，美食客户加钱了，让咱们把他们的视频挂上去，电影客户也加钱了，但是没美食客户给的多，那就把电影海报挂上去就得了，游戏客户没联系上，八成是玩疯了，就不管那栏就行了。”

1、效果图

2、思考

结构已经写好了，我实在是懒得改，反正变化不大，就是展示的内容变了，有没有一种写法可以让我把展示的内容像传数据一样传给组件让它展示呢？

Vue早就想到了本帅会遇到这种问题，人家早就准备好了 slot (插槽)！没错！就是字面意思！

组件内写一个插槽标签，使用组件时组件标签内的东西就是你要插到插槽的对象

值得注意的是你要插到插槽的对象是在使用这个组件的页面上解析完了插到组件插槽上的

3、CODE

1、App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、Category.vue

1
2
3
4
5
6
7

---

3、又改需求了！（具名插槽）

此时那位帅气的项目经理又屁颠屁颠的跑过来了，说：“小白啊，美食和电影客户又加钱了，下面还得加上一些其他展示信息，游戏客户就抠搜的。”

1、效果图

2、思考

甭思考了，就是要用多个插槽了！Vue预判了吗？嗯，预判了！具名插槽！

没错，就是字面意思！拥有 name (名字)的插槽，这样多写几个不就能区分了吗？

这回客户随便加钱，想插几个插几个，想插啥插啥，想怎么插就怎么插，谁会跟钱不去呢

3、CODE

1、App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2、Category.vue

1
2
3
4
5
6
7
8
9

4、Result

---

4、又双叒叕改需求了！（作用域插槽）

此时那位帅气的项目经理又双叒叕屁颠屁颠的跑过来了，说：“小白啊，美食和电影客户撤资跑了，就剩游戏客户一家了，那三个栏全挂游戏吧，最后一个金主可得留住啊。”

1、思考

数据在插槽所在的组件上，使用插槽组件的组件怎么获取插槽组件的数据呢？没错就是作用域插槽

2、CODE

1、App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2、Category.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3、Result

---

5、插槽 slot总结

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

   1. **适用于 父组件 ===> 子组件 **

2. 分类：默认插槽、具名插槽、作用域插槽

3. 使用方式：

   1. 默认插槽：

      父组件中：
              
                 
      html结构1
              
      子组件中：
              
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11

   2. 具名插槽：

      父组件中：
              
                  
      
                  
              
      子组件中：
              
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18

   3. 作用域插槽：

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

      2. 具体编码：

         父组件中：
               
                  
               
         
               
                  
               
         子组件中：
                 
               
                 
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34
         35