第三部分：Vue组件化编程

3.1 模块与组件

3.1.1 模块

• 向外提供特定功能的js程序，一般就是js文件

• 为什么使用模块：js文件很多、很复杂

• 模块的作用：复用js，简化js编程，提高js运行效率

3.1.2 组件

• 实现局部功能效果的代码集合

• 为什么使用组件：一个界面的功能很复杂

• 组件的作用：复用编码、简化编码、提高运行效率

3.1.3 模块化与组件化

• 在应用中js都以模块来编写，就是模块化编程

• 在应用中都以组件的形式编码，就是组件化编程

3.2 Vue中使用组件的步骤

3.2.1 流程

• 定义组件（创建组件）

• 注册组件

• 使用组件（写组件标签）

3.2.2 如何定义组件

• 使用Vue.extend( options ) 创建，其中options与new Vue时传入的options几乎一样，但也有区别

• 区别如下：

  • el不要写：所有的组件最终都会由一个VM去管理，由VM中的el决定去服务哪个容器

  • data必须写成函数：避免组件在复用时，数据存在引用关系

• 备注：使用template可以配置组件结构

3.2.3 如何注册组件

• 局部注册：靠new Vue时传入的components选项

• 全局注册：靠Vue.component( '组件名', 组件 )

• 编写组件标签：<school></school>

3.3 组件使用的几个注意事项

3.3.1 关于组件名

• 一个单词组成：

  • 首字母小写：school

  • 首字母大写：School

• 多个单词组成：

  • kebab命名法：my-school

  • CamelCase命名：MySchool（需要脚手架的支持）

• 备注：

  • 组件名尽可能的回避Html中已有的元素，如：h1、h2

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

3.3.2 关于组件标签

• 双闭合写法：<school></school>

• 单闭合写法：<school />

• 不使用脚手架，单闭合写法会导致后续组件不能渲染

3.3.3 一个简写方式

• const school = Vue.extend( options ) 可以简写为 const school = options；

3.4 VueComponent与组件的关系

3.4.1 VueComponent是什么

1. 组件本质上是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2. 我们只需要写<school/>，Vue解析时会帮我们创建school组件的实例对象

   • 解析组件内容，翻译执行解析

   • Vue帮我们执行：new VueComponent( options )

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

4. 组件中关于this的指向：

   • 组件配置中：data、methods、watch、computed中的函数，this均指向【VueComponent实例对象】

   • new Vue() 配置中：data、methods、watch、computed中的函数，this均指向【Vue实例对象】

5. 简称问题：

   • VueComponent的实例对象，简称vc、组件实例对象，

   • Vue的实例对象，简称vm

3.4.2 Vue与VueComponent的关系

• 一个重要的内置关系：

  • VueComponent.prototype._ _ proto _ _ === Vue.prototype

• 为什么要有这种关系：

  • 让组件实例对象（vc）可以访问到Vue原型上的属性、方法