vue3插槽、具名插槽、作用域插槽-足够入门了！

vue3 插槽

前言

这篇文章介绍vue组件的插槽！包括：插槽概念，具名插槽，作用域插槽等等，看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！

1. 概念

插槽（Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

举个栗子：

​ eg组件好比小霸王游戏机，插槽就是游戏机的插口，看用户插什么卡，就在屏幕（预留的位置）上显示出对应的游戏（内容）。

我们不能把一个游戏机就固定一个游戏，有了插槽，这就一个（游戏机）组件，可以玩（显示出）不同的游戏（用户自定义的内容）。概念不太容易理解，直接上图：

2. 插槽的基本使用

1. 在Left里面加一个slot标签

1
2
3
4
5
6
7
8
9
10

2 .在app根组件使用子组件里面直接放内容即可

      
      
        
        
        
        
        
        
        
      
    
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

3.这时候插槽的内容就会显示出来啦：

3. 具名插槽（带有name的插槽）

具名插槽以及作用域插槽的基本用法

eg:这里以一个栗子来讲解：

1.子组件 Article.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54

2.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

这样就把用户在app自定义的内容通过具名插槽的方式来显示出来了。

栗子运行截图来了：

4. 作用域插槽

在封装组件的过程中，可以为预留的 < slot> 插槽绑定 props 数据，这种带有 props 数据的 < slot> 叫做“作用域插槽”。可以在父组件中传参来显示子组件绑定的数据，示例代码如下：

	







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

4.1 解构作用域插槽的 Prop

作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。示例代码如下：

    

    
 

1
2
3
4
5
6
7
8

4.2 声明以及使用作用域插槽

在封装 MyTable 组件的过程中，可以通过作用域插槽把表格每一行的数据传递给组件的使用者。在使用 MyTable 组件时，自定义单元格的渲染方式，并接收作用域插槽对外提供的数据。示例代码如下：

    









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
41
42
43
44
45
46
47
48
49
50

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！