vue学习【第五篇】：Vue组件

 

什么是组件#

?
1
2
3
4
- 每一个组件都是一个vue实例
- 每个组件均具有自身的模板template，根组件的模板就是挂载点
- 每个组件模板只能拥有一个根标签
- 子组件的数据具有作用域，以达到组件的复用

根组件#

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <h1>{{ msg }}</h1>
</div>
<script type="text/javascript">
    // 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
    // 每个组件组件均拥有模板,template
    var app = new Vue({
        // 根组件的模板就是挂载点，不需要自定义
        el: "#app",
        data : {
            msg: "根组件"
        },
        // 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
        // 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
        template: "<div>显式模板</div>"
    })
    // app.$template
</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
<body>
    <div id="app">
        <abc></abc>
        <abc></abc>
        <abc></abc>
    </div>
    <hr>
    <div id="main">
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 局部组件
    var localTag = {
        // 子组件的数据具有作用域，以达到组件的复用, 每一个复用的组件具有自身独立的一套数据
        data: function () {
            return {  // 返回值是一个数据字典(一套数据)
                count: 0
            }
        },
        template: "<div @click='fn'>点击{{ count }}次</div>",
        methods: {
            fn: function () {
                this.count += 1;
            }
        }
    }
 
    // app根组件
    new Vue({
        el: "#app",
        // 注册
        components: {
            'abc': localTag
        }
    })
    // main根组件
    new Vue({
        el: "#main",
        components: {
            // localTag    js中键值一样可以简写，只写一个就行     这样写比较装十三，一般不知道js标识符于css/html标识符的相互转换的可能不知道
            'local-tag': localTag
        }
    })
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
</head>
<body>
    <div id="app">
        <global-tag></global-tag>
    </div>
    <div id="main">
        <global-tag></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 创建全局组件
    Vue.component('global-tag', {
        template: "<div @click='fn'>全局组件点击了 {{ count }} 次</div>",
        data: function () {
            return {
                count: 0
            }
        },
        methods: {
            fn: function () {
                this.count++;
            }
        }
    });
 
    new Vue({
        el: "#app",
    });
    new Vue({
        el: "#main",
    });
</script>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>组件通信父到子</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="sup_data">
 
        <global-tag :abcde="sup_msg" :sup_data="sup_data"></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 创建全局组件
    Vue.component('global-tag', {
        props: ['abcde', 'sup_data'],
        template: "<div @click='fn'>{{ abcde }}</div>",
        data: function () {
            return {
 
            }
        },
        methods: {
            fn: function () {
                alert(this.sup_data)
            }
        }
    });
    // 将父组件的信息传递给子组件
    // 采用属性绑定的方式: 1,父级提供数据 2.绑定给子组件的自定义属性 3.子组件通过props的数组拿到自定义属性从而拿到数据
    new Vue({
        el: "#app",
        data: {
            sup_msg: "父级的msg",
            sup_data: ""
        }
    });
</script>
</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>
<head>
    <meta charset="UTF-8">
    <title>组件通信子到父</title>
</head>
<body>
    <div id="app">
        <!-- abc为子组件的自定义事件,该事件的含义要在子组件内容声明规定 -->
        <global-tag @abc="action"></global-tag>
        <global-tag @abc="action"></global-tag>
        {{ sup_info }}
    </div>
 
</body>
<script src="js/vue.js"></script>
<script>
    // 创建全局组件
    Vue.component('global-tag', {
        template: "<div><input v-model='info'><p @click='sendMsg'>子组件</p></div>",
        data: function () {
            return {
                info: "",
                msg: "子组件的信息"
            }
        },
        methods: {
            sendMsg: function () {
//                alert(123)
                // 激活自定义事件 abc
                this.$emit('abc', this.msg, this.info)
            },
 
        }
    });
    // 将子组件的信息传递给父组件
    // 采用发生事件的方式:
    // 1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
    // 2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
    // 3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据
    new Vue({
        el: "#app",
        data: {
            sup_info: ""
        },
        methods: {
            action: function (msg, info) {
                alert(msg)
                this.sup_info = info
            }
        }
    });
</script>
</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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
        }
        a {
            color: black;
            text-decoration: none;
            display: block;
            height: 21px;
        }
        p {
            margin: 0;
            color: orange;
            float: left;
        }
        span {
            color: red;
            float: right;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <button @click="btnClick">留言</button>
        <hr>
        <ul>
            <!-- 如果每一个渲染的列表项是一个相对复杂的结构, 该复杂的结构可以封装成组件 -->
            <li v-for="(v, i) in list">
                <global-tag :value="v" :index="i" @delete="delAction"></global-tag>
            </li>
        </ul>
        <!--<ul>-->
            <!--<li v-for="(v, i) in list2">-->
               <!--<global-tag :value="v" :index="i" @delete="delAction"></global-tag>-->
            <!--</li>-->
        <!--</ul>-->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "",
            list: [],
            list2: []
        },
        methods: {
            btnClick: function () {
                if (this.msg) {
                    this.list.push(this.msg);
                    this.msg = "";
                }
            },
            delAction: function (index) {
                this.list.splice(index, 1)
            }
        }
    });
     
    Vue.component('global-tag', {
        props: ['value', 'index'],
        template: "<a href='javascript:void(0)'><p>{{ value }}</p><span @click='sendDel'>x</span></a>",
        methods: {
            sendDel: function () {
                this.$emit('delete', this.index)
            }
        }
    });
</script>
</html>

　　

posted @   鲸鱼的海老大  阅读(413)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae
CONTENTS
✕