Vue.js——60分钟组件快速入门（上篇）

发布时间：2020-12-16 23:23:09 所属栏目：百科来源：网络整理

导读：组件简介组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树：那么什么是组件呢？组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定

组件简介

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树：

Component Tree

那么什么是组件呢？组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。

本文的Demo和源代码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！（所有示例都放在GitHub Pages上了，请访问查看示例汇总）

由于组件的篇幅较大，我将会把组件的入门知识分为两篇来讲解，这样也便于各位看官们快速消化。

Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。

下面的代码演示了这3个步骤：

如果你这样做了，浏览器会提示一个错误：

我们可以在组件中定义并使用其他组件，这就构成了父子组件的关系。