组件

用来实现局部功能效果的代码集合

理解组件

传统方式编写应用

存在的问题:

• 依赖关系混乱, 不好维护
• 代码复用率不高

组件方式编写应用

优点:

• 复用代码
• 简化项目编码
• 提高运行效率

模块化与组件化

模块化:

• 当应用中的JS都以模块来编写, 那这个应用就是一个模块化应用

组件化:

• 当应用中的功能都是多组件的方式编写的, 那这个应用就是一个组件化的应用

使用组件

Vue中使用组件的三个步骤:

1. 定义组件(创建组件)
2. 注册组件
3. 使用组件(写组件标签)

定义组件

使用Vue.extend(options)创建组件, 其中options和new Vue(options)时传入的那个options几乎一致, 区别如下:

• 不需要el配置项, 因为最终所有组件都要经过一个Vue实例来管理, 由实例中的el来决定服务于哪个容器
• data必须写成函数, 避免组件被复用时, 数据存在引用关系
• 使用template可以配置组件结构

注册组件

局部注册: 在new Vue(options)时传入components选项 全局注册: 使用Vue.component('组件名', 组件)

编写组件标签

<hello></hello>

注意点

注意

关于组件名:

• 一个单词组成:
  • 第一种写法: user
  • 第二种写法: User
• 多个单词组成:
  • 第一种写法: my-user
  • 第二种写法: MyUser, 需要Vue脚手架支持
• 备注:
  • 组件名尽可能回避HTML中已有的元素名称, 例如: p、h1、H1等都不可以使用
  • 可以使用name配置项指定组件在开发者工具中呈现的名字

关于组件标签:

• 第一种写法: <user></user>
• 第二种写法: <User></User>
• 第三种写法: <User />, 注意不使用脚手架时, 这种写法会导致后续组件不能渲染

简写方式:

• const app = Vue.extend(options)可简写为: const app = options

非单文件组件

一个组件中包含多个组件

单文件组件

一个组件中只包含一个组件

VueComponent

组件本质是一个名为VueComponent的构造函数, 且不是开发者定义的, 是Vue.extend生成的

开发者只需写<user></user>或<user />, Vue解析时会帮我们创建user组件的实例对象, 及执行: new VueComponent(options)

关于this指向:

• 组件配置中data函数、methods中的函数、watch中的函数、computed中的函数的this均是VueComponent实例对象
• new Vue中data函数、methods中的函数、watch中的函数、computed中的函数的this均是Vue实例对象

VueComponent的实例对象, 简称vc也可成为组件实例对象

Vue的实例对象, 简称vm

注意

每次调用Vue.extend时, 返回的都是一个全新的VueComponent

一个重要的内置关系

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

VueComponent.prototype.__proto__ === Vue.prototype // true