（二）Vue组件化编程

2.1 模块与组件、模块化与组件化

2.1.1. 模块

1. 理解: 向外提供特定功能的 js 程序, 一般就是一个js 文件

2. 为什么: js 文件很多很复杂

3. 作用: 复用js, 简化js 的编写, 提高js 运行效率

2.1.2. 组件

1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)

2. 为什么: 一个界面的功能很复杂

3. 作用: 复用编码, 简化项目编码, 提高运行效率

2.1.3. 模块化

当应用中的js 都以模块来编写的, 那这个应用就是一个模块化的应用。

2.1.4. 组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。

2.2. 非单文件组件

1. 模板编写没有提示

2. 没有构建过程, 无法将ES6 转换成ES5

3. 不支持组件的CSS

4. 真正开发中几乎不用

👉Vue中使用组件的三大步骤：

​ 一、定义组件（创建组件）

​ 二、注册组件

​ 三、使用组件（写组件标签)

一、如何定义一个组件？

​ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但区别如下：
​ 1.el不要写，为什么？-——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务那个容器

​ 2.data必须写成函数，为什么？——避免组件被复用时，数据存在引用关系。

备注：使用template可以组件结构。

二、如何注册组件？

​ 1.局部注册：靠new Vue 的时候传入components选项

​ 2.全局注册：靠Vue.component(‘组件名’，组件)

三、编写组件标签

   <div id="root">
        <hello></hello>
        <hr>
        <h1>{{msg}}</h1>
    <school></school>
      <hr>
    <student></student> 
    </div>

    <div id="root2">
        <hello></hello>
    </div>
</body>
<script>
    
    //创建school组件
    const school = Vue.extend({
        //一定不要写el配置项，最终所有的组件
        // el: '#root',
        template:`
          

            
学校名称：{{schoolName}}
            
学校地址：{{address}}
            点我提示学校名
          `,
         data() {
           return {
               schoolName:'school',
               address:'北京',
         }
        },
        methods:{
            showName(){
                alert(this.schoolName)
            }
        },
    })
 //第一步创建组件
    const student = Vue.extend({
        //一定不要写el配置项，最终所有的组件
        // el: '#root',
         template:`
          

            
学生姓名{{studentName}}
            
学生年龄：{{age}}
          `,
         data() {
           return {
               studentName:'张三',
               age:18
         }
        },
        
    })
    
    const hello = Vue.extend({
        template:`
        

            
你好啊！
        
  
        `,
        data(){
            return{
                name:'Tom'
            }
        }
    })
    
    Vue.component('hello',hello)
    //创建按vm
    new Vue({
        el: '#root',
        data:{
            msg:'您好啊'
        },
        //第二步，注册组件
        components:{
            school:school,
            student:student
        }
    }) 

    new Vue({
        el:'#root2',
    }) 
</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
76
77
78
79
80
81
82
83
84
85
86

👉几个注意点：

1. 关于组件名：

   一个单词组成:

   ​ 第一种写法（首字母小写）：school

   ​ 第二种写法（首字母大写）：School

   多个单词组成：

   ​ 第一种写法(kebab-case命名):my-school

   ​ 第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)

   备注：

   （1）组件名尽可能回避HTML中已有的元素名称，例如：h2,H2都不行。

   （2）可以使用name配置项指定组件在开发者工具中呈现的名字。

   2. 关于组件标签：

      第一种写法：

  <school></school>
1

第二种写法：

<school/>
1

备注：不使用脚手架时，第二种会导致后续组件不能渲染

3. 一个简写方式

const school = Vue.extend(options)可以简写为：const school = options
1

👉关于VueComponent:

1. school组件本质是一个名为VueComponent的构造函数，且不是程序员调用的，是Vue.extend生成的。

2. 我们只需要或Vue解析时，会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options).

3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent!!!

4. 关于this指向：

   （1）组件配置中：
   data函数、methods方法中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】

   （2）new Vue()配置中：

   data函数、methods方法中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】

5. VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)。

Vue的实例对象简称vm

👉一个重要的内置关系

1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

2为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

2.3. 单文件组件

2.3.1. 一个.vue 文件的组成(3 个部分)

1. 模板页面

<template>
	页面模板
</template>
1
2
3

2. JS 模块对象

<script>
export default {
	data() {return {}},
    methods: {},
	computed: {}, 
    components: {}
}
</script>
1
2
3
4
5
6
7
8

3. 样式

<style>
	样式定义
</style>
1
2
3

2.3.2. 基本使用

1. 引入组件

2. 映射成标签

3. 使用组件标签