组件基础

Vue.js 通过将逻辑（methods）、变量（data）和页面结构（template）进行分离来组织网页应用。然而，对于大型且复杂的项目，这种组织方式可能不足以保持页面的可管理性。页面的 template 会变得过于庞大，而 data 和 methods 中也会包含大量属性。这些属性，如 data 中的变量和 methods 中的函数，可能负责页面中完全不同的部分，但它们被集中在一起，这使得开发和调试变得繁琐。

什么是组件？

Vue.js 提供了一种将整个网页应用拆分为小型、模块化且可独立管理的部分的方法，这些部分被称为组件。每个组件都有其自身的结构（template）、变量（data）和函数（methods）。它仅负责自身内部的所有逻辑和数据。这些组件可以组合起来，构建出完整的网页应用！

定义和声明组件

在 Vue.js 中，定义组件有多种方式，我们目前先关注最简单的一种。组件可以定义为一个 JavaScript 对象，该对象包含自己的属性，如 template、data、methods 等。定义完成后，需要在 Vue 实例的 components 属性中声明该组件，以便使用。之后，可以在 Vue 实例的 template 中通过类似 HTML 元素的语法（如 <ComponentName>）来引用该组件。以下是一个可执行示例，展示了一个简单的 HelloComponent，它仅包含一条显示“Hello from the component!”的 template。请运行下方的应用程序，查看 HelloComponent 的实际效果。

组件的 data、methods 和事件

每个在 Vue.js 中定义的组件都拥有独立的接口和逻辑。它只监听来自自身 template 的事件，并独自负责处理这些事件。在下一个示例中，展示了一个稍复杂的组件 ToggleSwitch，它具备自己的逻辑和事件监听器。请运行下方的应用程序，查看 ToggleSwitch 的实际效果。

</webpackbin

在上述示例中，ToggleSwitch 组件中的按钮监听 click 事件，并通过在该组件内定义的 toggle() 函数触发相应操作。按钮的状态也存储在该组件内部。

小知识： Vue 实例本身也是一个 Vue 组件，同样具有 template、data 和 methods。