12

1. 前言

本节我们将介绍如何使用组件（Component），组件是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

如何规划和设计组件是学习组件的难点，在编写组件时，我们需要不断思考如何提高组件的可复用性。

2. 慕课解释

组件是可复用的 Vue 实例，且带有一个名字。 —— 官方定义

组件是可复用的 Vue 实例， 我们可以把页面中在多个场景中重复使用的部分，抽出为一个组件进行复用。组件大大提高了代码的复用率。

3. 组件的注册

3.1. 全局组件注册

我们可以通过调用 Vue.component 的方式来定义全局组件，它接收两个参数：1. 组件名，2. 组件属性对象。

命名：

• 短横线：<my-component-name>
• 驼峰式：<MyComponentName> 使用驼峰命名组件时，首字母最好以大写字母开头。

属性对象：组件的属性对象即为 Vue 的实例对象属性。

全局组件可以在任何其他组件内使用，所以当我们设计的组件，需要在不同地方使用的时候，我们应当注册全局组件。

// 注册
// 驼峰命名
Vue.component('MyComponentName', {/\* \*/})
// 短横线命名
Vue.component('my-component-name', {/\* \*/})
......
// 使用
<my-component-name></my-component-name>
// 也可以使用自闭和的方式
<my-component-name /> 

具体示例如下：