Vue组件&&VueComponent

一、组件

1.组件的定义

实现应用中局部功能代码和资源的集合

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

(1).定义组件（创建组件）

(2).注册组件

(3).使用组件（写组件标签）

3.如何定义组件？

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

区别如下：

1.el不要写 因为 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

2.data必须写出函数 避免组件被复用时，数据存在应用关系

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

4.如何注册组件

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

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

5.编写组件标签

< xuexiao >< /xuexiao >

6.注意点

1.关于组件名：

一个单词组成：

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

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

多个单词组成：

第一种写法：my-school

第二种写法：MySchool

备注：

1.组件名尽可能回避HTML中已有的元素，例如 h2 H2 等

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

2.关于组件标签：

第一种写法：

第二种写法：

备注：不能使用脚手架时，会导致后续组件不能渲染

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

7.关于VueComponent:

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

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

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

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

4.关于this指向：

(1).组件配置中：

data函数、methods函数、watch中的函数、computed中的函数 他们的this均是【VueComponent实例对象】

(2).new Vue()函数中：

data函数、methods函数、watch中的函数、computed中的函数 他们的this均是【Vue实例对象】

5.VueComponent实例对象 简称vc或组件实例对象

Vue实例对象 简称 vm

8.重要的内置关系（vue原型）

内置关系：VueComponent.prototype.proto === Vue.prototype

为什么要有这个关系：

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