携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天点击查看活动详情。

非单文件组件

Vue 中使用组件的三大步骤：
1、定义组件(创建组件)
2、注册组件
3、使用组件(写组件标签)

如何定义一个组件 使用 Vue.extend(option) 创建，其中 option 和 new Vue(option) 时传入几乎一样。
区别：1、el 不要写 ---- 最终所有的组件都要经过一个 vm 的管理，由 vm 决定服务哪个容器
2、data 必须写成函数 ---- 避免组件被复用时，数据存在引用关系。 (使用 template 可以配置组件结构)

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

编写组件标签 <组件名></组件名>

组件名 一个单词：首字母大小写皆可。多个单词：用 - 连接。例：my-school。或者，每个单词的首字母大写。例：MySchol(需要脚手架支持) 组件名要尽可能回避 HTML 中已有元素名称。可以用 name 配置项指定组件在开发者工具中呈现的名字 · 组件标签

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

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

Vue Component

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

①、组件配置中： data函数、methods函数、watch函数、computed函数它们的 this 均是 [VueComponent 实例]
②、.new Vue(options) 配置中：data 函数、watch函数、computed 中的函数，它们的 this 均是 [Vue 实例对象]

5、VueComponent 的实例对象，简称 VC (也可称为：组件实例对象)。 Vue的实例对象，简称 vm

el 是根实例特有的选项

一个重要的内置关系 VueComponent.prototype.__ ptoto __ === Vue.prototype; 目的：让实例对象 (vc) 可以访问到 Vue 原型上的属性、方法。

Vue.js学习笔记(柒)

非单文件组件

Vue Component