vue学习之组件

01 组件

1. 1 vue 中使用组件的三大步骤

1. 定义组件（创建组件）
2. 注册组件
3. 使用组件（写组件标签）

1.2 如何定义一个组件

1. 使用Vue.extend(options)创建，其中 options 和 new Vue(options) 是传入的那个 options 几乎一样，但是也有区别。

区别为：

• el 不要写，为什么？ -- 最终所有组件都要经过 vm 管理，有vm中的 el 决定服务那个容器；
• data必须写成函数式，为什么？ -- 避免组件被复用时候，数据存在引用关系。

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

1.3 如何注册组件

1. 局部注册：靠 new Vue() 时候传入 components选项；
2. 全局注册：靠 Vue.components("组件名"，组件)

1.4 编写组件标签

<自己创建的组件名></自己创建的组件名>

1.5 几点注意事项

1. 关于组件命名：

2. 一个单词组成：

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

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

4. 多个单词组成

5. 第一种写法(用连字符连接)：my-school

6. 第二种写法(大驼峰写法)：MySchool

7. 备注：组件名要回避 html 元素名称，比如组件名不能命名为 H2, 或者 h2; 可以使用 name 配置项指定组件在开发者工具中呈现的名字。

8. 关于组件标签

9. 第一种写法：'<school></school>'

10. 第二种写法：<school/> 备注：不使用脚手架会使得后面的组件不能渲染

11. 一种简写方式

12. const school = Vue.extend(option) 可以简写为 const school = option

1.6 关于 VueComponent

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

2. 我们只用写<school></school>或者<school/>, vue 解析时候会帮我们创建school组件的实例对象。即vue帮我们执行：new VueComponent(option).

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

4. 关于this指向

5. 组件配置中：data函数，method中的函数，watch中的函数，computed中的函数他们的 this 都指向的是 VueComponent实例对象；

6. new Vue()配置中：data函数，method中的函数，watch中的函数，computed中的函数他们的 this 都指向的是Vue实例对象。

7. 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原型链上的属性，方法。