二十一、非单文件组件

（一）基本使用

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

• 定义组件（创建组件）
• 注册组件
• 使用组件（写组件标签）

2.如何定义一个组件

1）创建

• 使用 Vue.extend(options) 创建
• 其中 options 和 new Vue(options) 时传入的那个 options 几乎一样
• 使用 template 可以配置组件结构

2）区别

• el 不要写
  • 最终所有的组件都要经过一个 vm 的管理，由 vm 中的 el 决定服务哪个容器
• data 必须写成函数
  • 避免组件被复用时，数据存在引用关系

3.如何注册组件

• 局部注册：new Vue({}) 时传入 components 配置项
• 全局注册：Vue.component('组件名', 组件)

4.编写组件标签

<school></school>

（二）几个注意点

1.关于组件名

1）一个单词组成

• 写法一：首字母小写
  • school
• 写法二：首字母大写
  • School

2）多个单词组成

• 写法一：kebab-case 命名
  • my-school
• 写法二：CamelCase 命名
  • MySchool【需要 Vue 脚手架支持】

3）备注

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

2.关于组件标签

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

3.一个简写方式

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

（三）VueComponent

• school 组件本质是一个 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的
• 只需要写 <school/> 或 <school></school> ，Vue 解析时会创建 school 组件的实例对象
  • 即：Vue 执行了 new VueComponent(options)
• 关于 this 指向：
  • 组件配置中：data 函数、methods 中的函数、watch 中的函数、computed 中的函数
    • this 都是 VueComponent 实例对象
  • new Vue(options) 配置中：data 函数、methods 中的函数、watch 中的函数、computed 中的函数
    • this 都是 Vue 实例对象
• VueComponent 的实例对象，简称 vc（也可称为组件实例对象）
• Vue 的实例对象，简称 vm

特别注意

每次调用 Vue.extend 返回的都是一个全新的 VueComponent 实例对象

（四）一个重要的内置关系

VueComponent.prototype.__proto__ === Vue.prototype;

• 作用：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法
• 实例的原型对象（vm.__proto__）永远指向自己缔造者的原型对象（Vue.__proto__）

Vue.prototype
  => Vue的原型对象.__proto__
  => Object的原型对象.__proto__
  => null

Vue的实例对象(vm).__proto__
  => Vue的原型对象.__proto__
  => Object的原型对象.__proto__
  => null

VueComponent.prototype
  => VueComponent的原型对象.__proto__
  => Vue的原型对象.__proto__
  => Object的原型对象.__proto__
  => null

VueComponent的实例对象(vc).__proto__
  => VueComponent的原型对象.__proto__
  => Vue的原型对象.__proto__
  => Object的原型对象.__proto__
  => null