<vue 组件 4、插槽的使用>

代码结构

 

 

 

一、     01-slot-插槽的基本使用

1、 效果  

同样的一个插槽，父组件调用的时候不同展现的内容就不同

 

 

 

2、代码

01-slot-插槽的基本使用.html

 

?
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
 
        <!--
            1.插槽的默认值 <slot>button</slot>
            2.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素
        -->
 
        <div id="app">
            <cpn></cpn>
 
            <cpn><span>哈哈哈</span></cpn>
             
            <cpn><i>呵呵呵</i></cpn>
             
             
            <cpn>
                <div>我是div元素</div>
                <p>我是p元素</p>
            </cpn>
 
              
        </div>
 
 
        <template id="cpn">
            <div>
                <h2>我是组件</h2>
                <slot><button>按钮</button></slot>
            </div>
        </template>
 
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    message: '你好'
                },
                components: {
                    cpn: {
                        template: '#cpn'
                    }
                }
            })
        </script>
 
    </body>
</html>

 

 

二、     02-slot-具名插槽的使用

1、 效果

给插槽起名字，父组件调用的时候指定替换哪个插槽的内容

 

 

 

2、代码

02-slot-具名插槽的使用.html

?
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
 
        <div id="app">
            <cpn></cpn>
            ------------------------
            <cpn><span slot="center">标题</span></cpn>
            ----------------------------
            <cpn><button slot="left">返回</button></cpn>
        </div>
 
 
        <template id="cpn">
            <div>
                <slot name="left"><span>左边</span></slot>
                <slot name="center"><span>中间</span></slot>
                <slot name="right"><span>右边</span></slot>
            </div>
        </template>
 
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    message: '你好啊'
                },
                components: {
                    cpn: {
                        template: '#cpn'
                    }
                }
            })
        </script>
 
    </body>
</html>

 

三、     03-slot-绑定数据及展现方式

1、效果

给插槽绑定数据，调用的时候还可以指定数据的不同展现形式

 

 

 

2、代码

03-slot-绑定数据及展现方式.html

 

?
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
 
        <div id="app">
            <cpn></cpn>
             -------------------------------------
            <cpn>
                <!--目的是获取子组件中的pLanguages-->
                <template slot-scope="slot">
                    <span>{{slot.data.join(' - ')}}</span>
                </template>
            </cpn>
              -------------------------------------
            <cpn>
                <!--目的是获取子组件中的pLanguages-->
                <template slot-scope="slot">
                    <span>{{slot.data.join(' * ')}}</span>
                </template>
            </cpn>
        </div>
 
        <template id="cpn">
            <div>
                <slot :data="pLanguages">
                    <ul>
                        <li v-for="item in pLanguages">{{item}}</li>
                    </ul>
                </slot>
            </div>
        </template>
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    message: '你好啊'
                },
                components: {
                    cpn: {
                        template: '#cpn',
                        data() {
                            return {
                                pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
                            }
                        }
                    }
                }
            })
        </script>
 
 
    </body>
</html>

 

posted @   万笑佛  阅读(72)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示