组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码。在我们的程序中包含两个组件：project 组件和 sidebar 组件，如下图所示。这里我们主要介绍单文件组件的使用，即将组件用到 html、js 和 css 都写在一个文件里，每个组件自成一个系统。

文件结构

单文件组件一般使用 ".vue" 作为后缀名，一般的文件结构如下所示：

project.vue

<template> <div> {{ key }} () ()

export 将模块输出，default 表明使用文件名作为模块输出名，这就类似于将模块在系统中注册一下，然后其他模块才可用使用 import 引用该模块。

然后我们需要在主文件中注册该组件：

index.js

.component("project", project);

当注册完成之后，就可以 html 中使用该组件了

index.html

<project></project>

生命周期

Vue 的要给组件会经历 创建 -> 编译 -> 挂载 -> 卸载 -> 销毁 等一系列事件，这些事件发生的前后都会触发一个相关的钩子（hook）函数，通过这些钩子函数，我们可以在事件发生的前后做一些操作，下面先看下官方给出的一个 Vue 对象的生命周期图，其中红框内标出的就是对应的钩子函数

下面是关于这些钩子函数的解释：

hook 描述

beforeCreate 组件实例刚被创建，组件属性计算之前

created 组件实例创建完成，属性已绑定，但是 DOM 还未生成， $el 属性还不存在

beforeMount 模板编译/挂载之前

mounted 模板编译/挂载之后

mounted 模板编译/挂载之后（不保证组件已在 document 中）

beforeUpdate 组件更新之前

updated 组件更新之后

activated for keep-alive，组件被激活时调用

deactivated for keep-alive，组件被移除时调用

beforeDestory 组件销毁前调用

destoryed 组件销毁后调用

下面是钩子函数的使用方法：

() data

父子组件通信

父子组件通信可以使用 props down 和 events up 来描述，父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息，下面示意图：

图片来自 https://github.com/webplus/blog/issues/10

父组件向子组件传递数据

通过使用 props，父组件可以把数据传递给子组件，这种传递是单向的，当父组件的属性发生变化时，会传递给子组件，但是不会反过来。下面是一个示例

comp.vue

[]

index.html

app () </script>

在上面的流程中，父组件首先将要传递的数据绑定到子组件的属性上，然后子组件在 props 中声明与绑定属性相同的变量名，就可以使用该变量了，需要注意的一点是如果变量采用驼峰的命名方式，在绑定属性时，就要将驼峰格式改为 - 连接的形式，如果上面所示 shortMsg -> short-msg。

子组件向父组件通信

如果子组件需要把信息传递给父组件，可以使用自定义事件：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

下面是一个示例：

comp.vue

() .)

index.html

app ((msg) msg))

在上面的代码中，父组件通过 v-on 绑定了 child_chagne 事件，当 child_chagne 事件被触发时候就会调用 childChange 方法。在子组件中可以通过 $emit 触发 child_change 事件。这里需要注意的是事件名不用采用驼峰命名，也不要用 - 字符，可以使用下划线 _ 连接单词。

Event Bus 通信

Event Bus 通信模式是一种更加通用的通信方式，它既可以用于父子组件也可以用于非父子组件。它的原理就是使用一个空的 Vue 实例作为中央事件总线，通过自定义事件的监听和触发，来完成通信功能，下面是一个示意图：

图片来自 https://github.com/webplus/blog/issues/10

下面我们来看一个具体的实例：

首先定义一个空的 Vue 实例，作为事件总线

EventBus.js

()

在组件一中针对某个事件进行监听

comp1.vue

() () )

在组件二中触发相应事件完成通信

comp2.vue

() )

ES6

本节摘自 ECMAScript 6 入门

与 ES5 相比，ES6 提供了更加完善的功能和语法，程序中我们使用部分 ES6 语法，这里做一个简单的记录，如果想要系统的学习 ES6，可以参考下面的文章：

ECMAScript 6 入门

let

ES6 新增了 let 命令，用于声明变量。使用 let 声明的变量具有块级作用域，所以在声明变量时，应该使用 let，而不是 var。

b a // ReferenceError: a is not defined. b // 1

for of 循环

ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法

].

Set 和 Map

ES6 引入了 Set 和 Map 结构。下面是两者的具体介绍

Set

属性

属性 描述

Set.prototype.size 返回Set实例的成员总数。

方法

方法名 描述

add(value) 添加某个值，返回Set结构本身。

delete(value) 删除某个值，返回一个布尔值，表示删除是否成功。

has(value) 返回一个布尔值，表示该值是否为Set的成员。

clear() 清除所有成员，没有返回值。

keys() 返回键名的遍历器

values() 返回键值的遍历器

entries() 返回键值对的遍历器

forEach() 使用回调函数遍历每个成员

使用示例：

(); [].(

Map

属性

属性 描述

Map.prototype.size 返回 Map 实例的成员总数。

方法

方法名 描述

set(key, value) set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。

get(key) 读取 key 对应的键值，如果找不到 key，返回 undefined。

has(key) 返回一个布尔值，表示某个键是否在当前 Map 对象之中。

delete(key) 删除某个键，返回true。如果删除失败，返回false。

clear() 清除所有成员，没有返回值。

keys() 返回键名的遍历器

values() 返回键值的遍历器

entries() 返回所有成员的遍历器

forEach() 遍历 Map 的所有成员。

使用示例：

().set(o, 'content') .delete(o) // true m.has(o) // false

参考文章