01 组件
1. 1 vue 中使用组件的三大步骤
- 定义组件（创建组件）
- 注册组件
- 使用组件（写组件标签）
1.2 如何定义一个组件
- 使用Vue.extend(options)创建，其中 options 和 new Vue(options) 是传入的那个 options 几乎一样，但是也有区别。
区别为：
- el 不要写，为什么？ -- 最终所有组件都要经过 vm 管理，有vm中的 el 决定服务那个容器；
- data必须写成函数式，为什么？ -- 避免组件被复用时候，数据存在引用关系。
- 备注：使用 template 可以配置组件结构。
1.3 如何注册组件
- 局部注册：靠 new Vue() 时候传入 components选项；
- 全局注册：靠 Vue.components("组件名"，组件)
1.4 编写组件标签
<自己创建的组件名></自己创建的组件名>
1.5 几点注意事项
关于组件命名：
一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成
第一种写法(用连字符连接)：my-school
第二种写法(大驼峰写法)：MySchool
备注：组件名要回避 html 元素名称，比如组件名不能命名为 H2, 或者 h2; 可以使用 name 配置项指定组件在开发者工具中呈现的名字。
关于组件标签
第一种写法：'<school></school>'
第二种写法：<school/> 备注：不使用脚手架会使得后面的组件不能渲染
一种简写方式
const school = Vue.extend(option) 可以简写为 const school = option
1.6 关于 VueComponent
school 组件本质是一个名为 VueComponent的构造函数，且不是程序定义的，是vue.extend生成的。
我们只用写<school></school>或者<school/>, vue 解析时候会帮我们创建school组件的实例对象。即vue帮我们执行：new VueComponent(option).
特别注意：每次调用Vue.extend(option)，返回的都是一个全新的VueComponent。。
关于this指向
组件配置中：data函数，method中的函数，watch中的函数，computed中的函数他们的 this 都指向的是 VueComponent实例对象；
new Vue()配置中：data函数，method中的函数，watch中的函数，computed中的函数他们的 this 都指向的是Vue实例对象。
VueComponent的实例对象，以后简称 vc，也可称为组件实例对象；Vue的实例对象，以后简称 vm
1.7 复习原型以及原型链
<iframe id="25e054ff-d586-417d-bae9-2aa08613d993" src="code-editor/index.html" style="height: 456px;"></iframe>
[图片上传失败...(image-cf3b90-1657037685357)][图片上传失败...(image-ea076e-1657037669712)]
1.8 一个重要的内置关系
VueComponent.prototype.__proto__ === Vue.propertype
为什么要有这个关系：让组件实例对象（cv）可以访问到Vue原型链上的属性，方法。
