vue2学习 -- 组件化编程

1. 理解组件

组件的定义——实现应用中局部功能代码和资源的集合

• 模块化 ---- 当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。
• 组件化 ---- 当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

局部注册全带s，全局注册全不带s。
例：

	 // 全局注册
	 Vue.component('test',test)
	 // 局部注册
	 // 靠new Vue的时候传入components选项

Vue中使用组件的三大步骤：
一、定义组件（创建组件）
二、注册组件
三、使用组件（写组件标签）

---

❓
一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
区别如下：

1. el不要写，为什么？-- 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2. data必须写成函数，为什么？
   避免组件被复用时，数据存在引用关系。
   备注：使用template可以配置组件结构。

二、如何注册组件？

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

创建组件的几个注意点：

1. 关于组件名：

• 一个单词组成：
  • 第一种写法（首字母小写）：school
  • 第二种写法（首字母大写）：School
• 多个单词组成：
  • 第一种写法(kebab-case命名)：my-school
  • 第二种写法(CamelCase命名)：MySchool(需要Vue脚手架支持)

备注：

- 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
- 可以使用name配置项指定组件在开发者工具中呈现的名字。

2. 关于组件标签：

• 第一种写法：

    <school></school>
  

• 第二种写法：

    <School/>
  

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

3. 一个简写方式：

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

2. 组件嵌套

cosnt student = Vue.extend({
	template:`
	<div>...</div>
	`
})
cosnt s = Vue.extend({
	name:'xxx',
	template:`
	<div>...</div>
	`
	component:{
	student // 对象简写形式
	}
})
new Vue({
    el: "#root",
    data: {
      n: 1
    },
	components:{
	school:s // 组件没有设置name时 school就是vue组件的名字
	}
}

3. VueComponent 构造函数

以上面组件嵌套的代码为例：

1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2. 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
3. 特别注意：每次调用Vue.extend返回的都是一个全新的VueComponent！！！
4. 关于this指向：

• 组件配置中：
  data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】
• **new Vue( )**配置中：
  data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

5. VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)。
   Vue的实例对象，以后简称vm。
   vm和vc不完全相等，他们的实例身上有相同代码。

4. 一个重要的内置关系

VueComponent.prototype._proto === Vue.prototype