Vue组件化编程

概述
Vue使用组件的三大步骤
总结

概述

模块：向外提供特定功能的js程序，一般就是一个js
作用：复用js，简化js的编写，提高js运行效率
模块化：当应用中的js都以模块来编写的，称这个为模块化应用

组件定义：实现应用中局部功能代码（html,css,js）和资源（mp3,mp4,zip等）的集合
组件化：当应用中的功能都是多组件的方式编写的，称这个为组件化应用

传统方式编写应用存在的问题：依赖关系混乱，不好维护；代码复用率不高

非单文件组件：一个文件中包含n个组件
单文件组件：一个文件只包含一个组件

Vue使用组件的三大步骤

定义组件

<html>
 <body>
 <script>
   	const people = Vue.extend({
            name:'people',
            template:`
            
                {{province}}
                {{city}} 
                  
            
            `,
            data(){
                return{
                    province:'hubei',
                    city:'xiaogan',
                    flag:true
                }
            },
            methods:{
                df(){
                 this.flag=!(this.flag)
                }
            }
        })


// =======================================包含关系=====================================================
        const student = Vue.extend({
            name:'student',
            template:`
            
                {{stname}}
                {{dep}}   
            
            `,
            data(){
                return{
                    stname:'wzm',
                    dep:'jd'
                }
            }
        })

        const school = Vue.extend({
            name:'school',
            template:`
            
                {{scname}}
                {{address}}
                   
            
            `,
            data(){
                return{
                    scname:'cjdx',
                    address:'jz'
                }
            },
            components:{
                student
            }
        })
// =======================================包含关系=====================================================



// ====================================将people和school合并============================================




        const together = Vue.extend({
            name:'together',
            template:`
            
                
                
            
            `,
            components:{
                people,
                school
            }
        })
  </script>
 </body>
</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
79
80
81
82
83
84
85
86
87
88

注册组件

<html>
 <body>

<script>
 ......//定义组件
 new Vue({
            el:'#app',

            //注册组件
            components:{
                // people,
                // school
                together
            }
        })
 </script>
 </body>
</html> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用组件

<html>
 <body>
  <div id="app">
        <!-- <people></people>
        <school></school> -->

        <together></together>
  </div>
  <script>
  ...... //定义组件
  ......//注册组件
  </script>
 </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

非单文件组件

项目结构
在这里插入图片描述
代码内容如上即可

......
1

单文件组件

文章地址跳转

总结

(1) 定义组件
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别
区别：

el 不要写（最终所有的组件都会经过一个vm管理，由vm中的el决定服务哪个容器）
data必须写成函数（避免组件复用时，数据存在引用关系）
使用template可以配置组件结构

(2) 注册组件
局部注册：靠 new Vue()传入components
全局注册：Vue.component(‘组件名’,‘组件’)
(3) 使用组件（容器中使用）
<组件名>

一个重要的内置关系：VueComponent.prototype.__proto__=== Vue.prototype
内置关系的作用：让组件实例对象（vc）可以访问到Vue原型上的属性，方法

相关阅读:
双二面角耦合力场项的计算
20231005使用ffmpeg旋转MP4视频
Node.js--》简易资金管理系统后台项目实战（后端）
斩获双奖 | 悬镜安全亮相IDC 2022 CSO全球网络安全峰会
可以，很6！微信这波改造，一刀斩断了一条“灰色”业务线。
第二讲：C#与halcon联合环境配置，halcon代码导出与软件界面搭建
初识Numpy
从JVM角度理解Java并发（下）
QGIS 使用矢量数据（shp）批量裁剪栅格数据（tif）
Compose要是不 `remember`，相关功能就实现不了了吗？

原文地址：https://blog.csdn.net/zimingyo/article/details/126946628