Vue中的组件

这是在 导读 那一章提到 视图组件化 的图片。当我们使用 Vue 来进行实际项目开发时,更多会构建一个单页面应用程序,也就是说,应用在大多数情况之下只会存在一个 html 页面,而在应用中所谓的页面跳转,多是使用路由(vue-router)和组件(component)来配合完成。

关于路由(vue-router)的知识会在后面的章节进行讲解,这一章先来了解一下 Vue 中的组件(component)。

看一下 Vue 的官网上对组件的介绍:

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:

这里写图片描述

Vue 提倡当某一个功能是可复用并且独立的时候,我们就把它抽象为一个组件。比如在使用 Bootstrap 的时候的 btn-default、btn-success,这些按钮组可以抽象为一个个组件,因为它们具有明显的可复用并且独立的特性。

下面我们就开始正式进入组件(Component)的学习,这次的学习共分为两章进行,学习的内容如下:

  1. 组件的使用
  2. 组件之间的传参
  3. 组件之间的事件传递
  4. 插槽
  5. 动态组件和异步组件