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

1、定义组件（创建）

2、注册组件

3、使用组件（写组件标签）

一、如何定义一个组件？

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

区别如下：

（1）el不要写，为什么？---最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

（2）data必须写成函数，为什么？---避免组件被复用时，数据存在引用关系

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

二、如何注册组件？

（1）局部注册：new Vue的时候传入components选项

（2）全局注册：靠Vue.component('组件‘，组件)

三、编写组件标签：

非单文件案例：

结果图（注意：第2个学生组件修改年龄后，第1个学生组件的年龄不会跟着改变，因为data使用了函数式，是创建了一份数据给每个使用的组件）：

几个注意点：

1、关于组件名：

（1）一个单词组成：首字母大写（School）或首字母小写（school）

（2）多单词组成：kebab-case命名（my-school）或者CamelCase命名（MySchool，这种写法需要脚手架支持）

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

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

2、关于组件标签：

（1）

（2）

（3）不用脚手架时，会导致后续组件不能渲染

3、简写：

const school = Vue.extend(options) ==>const school = options

4、一般会定义一个“app”组件来管理多个子组件

关于组件 （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(options)配置中，data函数、methods中的函数、watch中的函数、computed中的函数 他们的this均是【Vue实例对象】。

视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=57&spm_id_from=pageDriver&vd_source=60a28e8364654bee938864b1d19905ec

第53、54、55、56、57集