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></my-component>
// 也可以使用自闭和的方式
<my-component /> 

具体示例如下:

实例演示
预览 复制