【vue】学习笔记--第二章Vue组件化编程

组件化

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

一、非单文件组件

Vue使用组件步骤

一、定义组件

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

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

二、如何注册组件

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

三、编写组件标签

<school></school>

几个注意点

1. 关于组件名

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

1. 组件名尽可能回避HTML中已有的元素名称
2. 可以使用name配置项制定组件在开发者工具中呈现的名字

2. 关于组件标签：

• 第一种写法：<school></school>
• 第二种写法：<school/>
• 备注：不使用脚手架时，<school/>会导致后续组件不能渲染

3. 一个简写方式：
   const school = Vue.extend(options)可简写为：const school = options

组件的嵌套

VueComponent

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

• 组件配置中：所有函数this均是【VueComponent实例对象】
• 组件配置中：所有函数this均是【Vue实例对象】

5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）

一个重要的内置关系

1. VueComponent.prototype.proto=== Vue .prototype
2. 为什么要有这个关系：让组件实例对象VueComponent可以访问到Vue原型上的属性和方法。
   

二、单文件组件