一、组件的定义
1、实现应用中局部功能的代码和资源的集合；
2、每一个功能模块都是组件，每一个组件包括html、css、js三个文件；
注意：
1、组件没有el属性，初始定义的时候没有确定专门为哪个容器服务，可以随时被其他组件或vm调用，“组件就是一块砖，哪里需要哪里搬”
二、非单文件组件
也就是说一个html中包含有多个组件；
1、使用步骤：
（1）使用extend创建组件：
在script标签中编写，可以包含template属性用于添加显示在页面的html结构，例：template:` ... `，例：const school = Vue.extend({ ... })
data要写成函数式；
原理：因为如果是对象式的话，所有元素复用该组件时使用的数据都是同一个，容易造成一个元素改变组件的数据，另一个元素的数据也随着改变；但是如果是函数式，每次组件复用的时候，都会创建一个新的函数，数据的更改也不会互相影响。
（2）注册组件
局部注册：new Vue({ components:{ ... } })
全局注册：<script>Vue.component('组件名',组件)</script>
（3）使用组件
<school></school>
<div id="root">
<!-- 第三步：组件的使用 -->
<school></school>
<student></student>
</div><script>
//第一步：创建school组件
const s = Vue.extend({
//使用template编写html页面
template:`
<div>
<h2>学校名称：{
{schoolName}}</h2>
<h2>学校地址：{
{address}}</h2>
</div>
`,
//不能够使用el绑定死所服务的元素，组件定义时一定不要设置el，所有的组件最终都会由一个vm管理并决定服务于那一个元素
// el:'#root',
//注意：这里的data要写成函数式!
//因为如果是对象式的话，所有元素复用该组件时使用的数据都是同一个，容易造成一个元素改变组建的数据，另一个元素的数据也随着改变
//但是如果是函数式，每次组件复用的时候，都会创建一个新的函数，数据的更改也不会互相影响
data(){
return{
schoolName:'尚硅谷',
address:'北京',
}
}
})
//第一步：创建student组件
const student = Vue.extend({
//可以使用name属性去定义属性在开发者工具中的用于展示的名字
name:'stu',
//使用template编写html页面
template:`
<div>
<h2>学生姓名：{
{studentName}}</h2>
<h2>学生年龄：{
{age}}</h2>
</div>
`,
data(){
return{
studentName:'李四',
age:18
}
}
})
//全局注册
Vue.component('student',student)
//创建vue
new Vue({
el:'#root',
//第二步：使用组件标签components注册组件（局部注册）
components:{
school:s //简写形式，完整写法为：school:school
}
})
</script>2、注意事项
（1）多个单词组成
使用-连接，最后页面显示会将单词首字母都大写；
例：new Vue({ components:{ 'my-school':s } })，页面：MySchool
（重要）在脚手架中：两个单词的首字母都大写；
例：new Vue({ components:{ MySchool:s } })
（2）一个单词组成
无论首字母小写（school）还是大写（School），在页面中都会展示为首字母大写的形式；
（3）不要使用html存在的标签名（h2、h3）作为组件名；
（4）标签写法：
双标签：<s></s>
单标签：<s/>
（5）创建组件的简写形式：
可以把Vue.extend省略，会自动帮我们调用，例：const school ={ ... }
三、VueComponent
组件本质上是一个VueComponent的构造函数，且不是程序员定义的，而是Vue.extend生成的；
我们只需要写<school>或<school></school>，vue解析时会帮我们创建School实例对象，即：Vue帮我们执行new VueComponent(options)
特别注意：每次调用Vue.extend返回的都是一个全新的VueComponent！！
1、关于this的指向：
（1）组件配置中：
data函数、methods函数、watch函数、computed函数中，他们的this都是【VueComponent实例对象】
（2）new Vue(options)配置中：
data函数、methods函数、watch函数、component函数中，他么的this都是【vue实例对象】
2、VueComponent简称vc（也可以称为组件实例对象）
ps：vue实例对象简称为：vm
四、VueCpmponent.prototype.__proto__=vm.prototype
存在的意义：让组件化实例（vc）也能访问到vue原型上的属性和方法；