组件切换之笨办法、动态组件(is属性、keep-alive)、插槽(不具名、具名)

1 组件切换之笨办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='order'">订单</button>
    
    <hr>
    <home v-if="who=='home'"></home>
    <good v-else-if="who=='good'"></good>
    <order v-else></order>
</div>
</body>
</html>

<script>
    var home = {
        template: `
        
            首页
        `
    }
    
    var good = {
        template: `
        
            商品页面
        `
    }
    
    var order = {
        template: `
        
            订单页面
        `
    }
    
    let vm = new Vue({
        el: '#app',
        data: {
            who: 'home'
        },
        components:{
            home,
            good,
            order,
        }
    });
</script>

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

2 动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">

    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='order'">订单</button>
    <hr>

    <component :is="who"></component>
    `component`标签的is属性等于组件名字，这里就会显示这个组件

</div>
</body>
</html>

<script>

    var home = {
        template: `
        
            首页
        `
    }

    var good = {
        template: `
        
            商品页面
        `
    }

    var order = {
        template: `
        
            订单页面
        `
    }

    let vm = new Vue({
        el: '#app',
        data: {
            who: 'home'
        },
        components:{
            home,
            good,
            order,
        }
    });
</script>
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

3 动态组件之keep-alive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">

    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='order'">订单</button>
    <hr>

    keep-alive:用于缓存动态组件或者将组件保持在活动状态，以便在切换页面时不会销毁它们
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>


</div>
</body>
</html>

<script>

    var home = {
        template: `
        
            首页
        `
    }

    var good = {
        template: `
        
            商品页面
            
              搜索商品：
              
            
        `,
        data(){
            return {
                name: ''
            }
        },
        methods: {
            handleSearch(){
                alert(this.name)
            }
        }
    }

    var order = {
        template: `
        
            订单页面
        `
    }

    let vm = new Vue({
        el: '#app',
        data: {
            who: 'home'
        },
        components:{
            home,
            good,
            order,
        }
    });
</script>
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

4 插槽

4.1 不具名插槽

插槽：一般情况下，编写完一个组件之后，组件的内容都是写死的，需要加数据，只能去组件中修改，
	扩展性很差。然后就出现了插槽这个概念，只需要在组件中添加<slot></slot>，
	就可以在body的组件标签中加内容。
--使用步骤：		
	1.在组件的html的任意位置，放个标签
    	<slot></slot>
    2.后期再父组件中使用该组件时
        <lin>
            放内容
        </lin>
    3.放的内容，就会被渲染到slot标签中
1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <lin>
        <div>
            我是div
        </div>
    </lin>

    <hr>
    <lin>
        <img src="./img/1.jpg" alt="" height="200">
    </lin>
</div>
</body>
</html>

<script>

    var lin = {
        template: `
        
            我是一个组件
            
            我是组件内部的h2
        `
    }

    let vm = new Vue({
        el: '#app',
        data: {
        },
        components:{
            lin
        }
    });
</script>
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

4.2 具名插槽

--使用步骤：	
	1 组件中可以留多个插槽，命名
        <div>
            <h1>我是一个组件</h1>
            <slot name="middle"></slot>
            <h2>我是组件内部的h2</h2>
            <slot name="footer"></slot>
        </div>
	2 在父组件中使用时，指定某个标签渲染到某个插槽上
        <lin>
            <div slot="footer">
                我是div
            </div>
            <img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="" slot="middle">
        </lin>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <lin>
        <div slot="footer">
            我是div
        </div>
        <img src="./img/2.jpg" alt="" slot="middel">
    </lin>

</div>
</body>
</html>

<script>

    var lin = {
        template: `
        
            我是一个组件
            
            我是组件内部的h2
            
        `
    }

    let vm = new Vue({
        el: '#app',
        data: {
        },
        components:{
            lin
        }
    });
</script>

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

相关阅读:
摩根大通限制英国客户购买加密货币，市场掀起涟漪！
kotlin几种函数的写法
 【Gazebo入门教程】第一讲 Gazebo的安装、UI界面、SDF文件介绍
 包类包的作用域
 正则表达式
 docker版jxTMS使用指南：以配置化的方式来获取设备数据
 re学习（37）DASCTF 2023 & 0X401七月暑期挑战赛 controflow
阿里巴巴中国站item_search_img按图搜索1688商品（拍立淘） API 返回值说明
 Linux的用户管理和用户组管理
 【Struts2框架】idea快速搭建struts2框架
原文地址：https://blog.csdn.net/weixin_44145338/article/details/133072691