Vue的模块与模块化、组件与组件化

为什么使用组件化开发

传统的编写模式

在这里插入图片描述

组件化的编写模式

每个组件拥有自己的html片段(不是完整的html),css和js。
在这里插入图片描述

所有组件都有vm进行指挥
组件也可以嵌套

几个定义

模块

模块定义：模块即向外提供特定功能的js程序，一般一个模块就是一个js文件
模块作用: 复用js,简化js的编写,提高js运行效率

模块化

当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。
将一个大的js拆分成多个小的js以实现模块化

组件的定义

组件是实现应用中局部功能代码和资源的集合
代码：html、css、js
资源：mp3 mp4 ttf .zip
局部：将所有功能写在一个组件中是没有意义的所以要分开写。

组件的作用:复用编码,简化项目编码,提高运行效率

组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。
将应用按功能点拆分，一个功能就是一个组件。
组件中的js也可以拆分成多个js，实现js的模块化。

组件的编写

非单文件组件

一个文件中包含有n个组件。
一个html文件中可以包含多个组件
组建的编写需要分成3步：创建组件、注册组件

创建组件

使用Vue.extend({配置对象})创建，其中配置对象和new Vue(options)时传入的那个options几乎一样，但也有点区别。
区别如下:

el不要写。最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
组件就是一块砖，哪里需要哪里搬
data必须写成函数。避免组件被复用时，数据存在引用关系。
即如果data是一个配置对象，那么如果该组件被多个html引用，那么多个html的该组件的data是指向同一个对象的，则只要一个html改变data值，其他所有的html页面的该data值也改变，这样不好。

定义组件时，要把组件中html对应的内容写在template中。使用template配置组件结构。

eg：

//   创建school组件
      const school = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        
            学校名字:{{schoolName}}
            地址:{{address}}
        `,
      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注册组件

注册局部组件

在vue实例中注册组件，靠new Vue的时候传入components选项

new Vue({
          components:{
				组件名:定义的组件
          }
        });
1
2
3
4
5

eg：

        const vm = new Vue({
          el: "#root",
          components:{
            school:school
          }
        });
1
2
3
4
5
6

注册全局组件

局部注册是说，只有在vue实例中注册该组件，才能使用该组件，不注册就不能使用。
那如何不在vue实例中注册就可以使用组件呢?——全局注册
全局注册靠Vue.component('组件名',组件位置)

eg：

 Vue.component("school", school);
1

使用组件

在html中编写组件标签

<div id="root">
        <school>school>
div>
1
2
3

例子

局部注册：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script type="text/javascript" src="../js/vue.js">script>
  head>
  <body>
    <div id="root">
        <school>school>
      <hr />
      <student>student>
    div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
      //   创建school组件
      const school = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        
            学校名字:{{schoolName}}
            地址:{{address}}
        `,
      });

      const student = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            studentName: "🐏",
            age: 18,
          };
        },
        template: `
        
            名字:{{studentName}}
            年龄:{{age}}
        `,
        
      });


        const vm = new Vue({
          el: "#root",
        //   第二步，注册组件
          components:{
            school:school,
            student:student,
          }
        });
    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

在这里插入图片描述
全局注册：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script type="text/javascript" src="../js/vue.js">script>
  head>
  <body>
    <h2>实例1:h2>
    <div id="root">
      <school>school>
      <hr />
      <student>student>
    div>
    <h2>实例2:h2>
    <div id="root2">
      <school>school>
      <hr />
      <student>student>
    div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      //   创建school组件
      const school = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        
            学校名字:{{schoolName}}
            地址:{{address}}
        `,
      });

      const student = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            studentName: "🐏",
            age: 18,
          };
        },
        template: `
        
            名字:{{studentName}}
            年龄:{{age}}
        `,
      });

      //   第二步，注册组件(全局注册)
      Vue.component("school", school);
      Vue.component("student", student);

      const vm = new Vue({
        el: "#root",
        //   第二步，注册组件
        //   components:{
        //     school:school,
        //     student:student,
        //   }
      });
      new Vue({
        el: "#root2",
      });
    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

在这里插入图片描述
vue开发者工具

组件的名称在vue开发者工具中首字母自动变成大写

单文件组件

一个文件中只包含有1个组件。

该文件名的后缀就是.vue
.vue文件格式

<template>

template>
<script>
// 组件交互的代码（数据、方法）
script>
<style>
/* 组建的样式 */
style>
1
2
3
4
5
6
7
8
9

组件一般需要暴露出去
可以将Vue.extend()省略，直接将组件的配置对象暴露出去
eg：

// 组件交互的代码（数据、方法），相当于非单文件中的除了template的配置
<script>
// export default Vue.extend(
// {
//     name:'School',
//     data() {
//     },
// })
export default {
    name:'School',
    data() {
    },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

单文件组件的编写

先编写一个组件School组件
School.vue

<template>
    
    <div class="demo">
        <h2>学校名字:{{schoolName}}h2>
        <h2>地址:{{ address }}h2>
    div>
template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的除了template的配置
export default {
    name:'School',
    data() {
        return {
            schoolName: "nefu",
            address: "哈尔滨",
        };
    },
}

script>
<style>

/* 组建的样式 */
.demo{
    background: orangered;
}
style>
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

定义app.vue汇总所有的组件
app.vue的作用：

app.vue:

<template>
    <div>
        <School>School> 
        <Student>Student>
    div>
template>

<script>
    //引入组件
    import School from './School'
    import Student from './Student' 
    export default {
        name: 'App',
        components: {
                School,
                Student
            }
        }
script>

<style>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

创建vm
在main.js中创建 vue实例对象
main.js

import App from './App.vue'

new Vue({
    el: "#root",
    // template:``,
    components:{App}
})
1
2
3
4
5
6
7

创建容器
创建index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <div id="#root">
        <App>App>
    div>
    
    <script type='text/javascript' src='../../js/vue.js'>script>
    
    <script type='text/javascript' src='./main.js'>script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这样就完成了一个单文件组件的编写。
单文件组件的目录结构：
在这里插入图片描述

脚手架概念引入

.vue文件在浏览器是不能直接解析的，需要编译加工成.js文件。编译的方法有两种：一种是通过webpack等工具我们手动编译，另一种方式是利用vue提供给我们的脚手架进行编译（对webpack等工具的封装），我们一般采取脚手架方式。

组件的注意点

组件名

一个单词的组件名：都小写，或者首字母大写。
eg：school，School
多个单词组成：都小写（当成一个单词处理），或者使用'单词-单词'的格式
eg：

          components:{
            'my-school':school,
          }
1
2
3

vue开发者工具：
在这里插入图片描述
也可以使用大驼峰式直接为组件命名，但是有一个前提是使用脚手架。

组件名尽可能回避HTML 中已有的元素名称，例如: h2、H2都不行。
可以使用name配置项在组件定义时指定组件在开发者工具中呈现的名字
eg：

const school = Vue.extend({
        name: "xuexiao",
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        
            学校名字:{{schoolName}}
            地址:{{address}}
        `,
      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

组件标签

第一种写法:
第二种写法:
备注:不用使用脚手架时,会导致后续组件不能渲染。

组件定义的简写

一个简写方式:
const school = Vue.extend(options）可简写为:const school = options

组件的嵌套

基本嵌套

组件中还可以定义组件以实现组件的嵌套。
如在school中嵌套student只需在school中定义components配置项，里面配置student组件，
同时student组件的使用也需要在school的 template中使用。

eg：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script type="text/javascript" src="../js/vue.js">script>
  head>
  <body>
    <div id="root">
      <h2>欢迎h2>
      <school>school>
    div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
        //   创建student组件
      const student = Vue.extend({
        data() {
          return {
            studentName: "yang",
            age: "18",
          };
        },
        template: `
        
            学校名字:{{studentName}}
            地址:{{age}}
        `,
      });


      //   创建school组件
      const school = Vue.extend({
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        
            学校名字:{{schoolName}}
            地址:{{address}}
            
        `,
        components:{
            student: student,
        }
      });
      
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "欢迎！",
        },
        //   第二步，注册组件
        components: {
          school: school,
        },
      });
      new Vue({
        el: "#root2",
      });
    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

在这里插入图片描述

app组件

app组件用于管理所有组件，app组件和vm的关系
在这里插入图片描述
VM只需管理app一个组件，由app管理所有组件。
app组件:一人之下万人之上。

eg：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script type="text/javascript" src="../js/vue.js">script>
  head>
  <body>
    <div id="root">
       <app>app>
    div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
        //   创建student组件
      const student = Vue.extend({
        data() {
          return {
            studentName: "yang",
            age: "18",
          };
        },
        template: `
        
            学校名字:{{studentName}}
            地址:{{age}}
        `,
      });


      //   创建school组件
      const school = Vue.extend({
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        
            学校名字:{{schoolName}}
            地址:{{address}}
            
        `,
        components:{
            student: student,
        }
      });

      //   创建hello组件
      const hello = Vue.extend({
        data() {
          return {
            hello:"hello,你好"
          };
        },
        template: `
        
            {{hello}}
        `,
        components:{
            student: student,
        }
      });

      //   创建app组件
      const app = Vue.extend({
        template: `
        
            
            
        
      `,
        components: {
          school:school,
          hello:hello,
        },

        })
      
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "欢迎！",
        },
        //   第二步，注册组件
        components: {
            // 简写
          app
        },
      });
      new Vue({
        el: "#root2",
      });
    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
89
90
91
92
93
94
95
96
97
98

在这里插入图片描述

VueComponent

组件是什么数据类型的呢？是一个名为VueComponent的构造函数。

 const school = Vue.extend({
   data() {
     return {
       schoolName: "nefu",
       address: "哈尔滨",
     };
   },
   template: `
   
       学校名字:{{schoolName}}
       地址:{{address}}
   `,
 });
 console.log(school);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue .extend生成的。
我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即vue帮我们执行的:new VueComponent(options)。options就是我们在组件中写的配置对象。
特别注意:每次调用Vue.extend，返回的都是一个全新的VueComponent!!!
验证：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script type="text/javascript" src="../js/vue.js">script>
  head>
  <body>
    <div id="root">
      <school>school>
      <hello>hello>
    div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
      //   创建school组件
      const school = Vue.extend({
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        
            学校名字:{{schoolName}}
            地址:{{address}}
        `,
      });
      //   创建school组件
      const hello = Vue.extend({
        data() {
          return {
            hello:"你好呀"
          };
        },
        template: `
        
            {{hello}}
        `,
      });

      console.log(school===hello);

      const vm = new Vue({
        el: "#root",
        //   第二步，注册组件
        components: {
          school: school,
          hello:hello,
        },
      });
    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

   console.log(school===hello);
1

输出：
在这里插入图片描述

组件中this指向

(1)组件配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
(2)new Vue(options)配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

VueComponent实例对象（vc）的功能和Vue实例（vm）很像，也有数据代理、生命周期，数据监测，参数的配置项也很相似。
但是二者是不同的：1. vm可以指定el，而vc不可以; 2. data定义的区别。
vm得功能>=vc

VueComponent的实例对象，简称vc（也可称之为:组件实例对象）。.
Vue的实例对象,简称vm.
vm管理着一个个vc。

在这里插入图片描述

一个重要的内置关系

一个重要的内置关系:VueComponent.prototype._proto_ === Vue.prototype.

根据原型链的知识，可以理解vue和VueComponent的如下原型关系
但是VueComponent将原型链做如下修改VueComponent.prototype._proto_ === Vue.prototype.，即：

这样做的目的是：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
这样在Vue的原型对象上定义一个属性，vueComponent实例对象可以通过原型链访问到。
eg：

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script type="text/javascript" src="../js/vue.js">script>
  head>
  <body>
    <div id="root">
      <school>school>
    div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
      Vue.prototype.x = 10

      const school = Vue.extend({
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        
            学校名字:{{schoolName}}
            地址:{{address}}
            Vue.prototype上的x:{{x}}
        `,
      });
      const vm = new Vue({
        el: "#root",
        components: {
          school: 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

在这里插入图片描述

相关阅读:
day17-正则表达式作业
 前端经典面试题 | Computed 和 Watch 的区别
 Note——time
Idea新建项目配置Java3D 环境配置
 使用yum install和reposync下载rpm安装包以及wget和curl下载文件
 多线程之间如何进行通信？
数据请求方式Fetch
通信原理板块——利用香农公式对连续信道的信道容量计算
 【Github】 Github修改仓库的基本信息
 如何进行MDM的产品测试
原文地址：https://blog.csdn.net/mantou_riji/article/details/125866663

Vue的模块与模块化、组件与组件化

文章目录

为什么使用组件化开发

传统的编写模式

组件化的编写模式

几个定义

模块

模块化

组件的定义

组件化

组件的编写

非单文件组件

创建组件

学校名字:{{schoolName}}

地址:{{address}}

注册组件

注册局部组件

注册全局组件

使用组件

例子

学校名字:{{schoolName}}

地址:{{address}}

名字:{{studentName}}

年龄:{{age}}

学校名字:{{schoolName}}

地址:{{address}}

名字:{{studentName}}

年龄:{{age}}

单文件组件

单文件组件的编写

脚手架概念引入

组件的注意点

组件名

学校名字:{{schoolName}}

地址:{{address}}

组件标签

组件定义的简写

组件的嵌套

基本嵌套

学校名字:{{studentName}}

地址:{{age}}

学校名字:{{schoolName}}

地址:{{address}}

app组件

学校名字:{{studentName}}

地址:{{age}}

学校名字:{{schoolName}}

地址:{{address}}

{{hello}}

VueComponent

学校名字:{{schoolName}}

地址:{{address}}

学校名字:{{schoolName}}

地址:{{address}}

{{hello}}

组件中this指向

一个重要的内置关系

学校名字:{{schoolName}}

地址:{{address}}

Vue.prototype上的x:{{x}}