组件是可复用的 Vue 实例，在开发过程中，我们可以把重复用到的功能封装成自定义组件，达到便捷开发的目的。

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

vue 如何自定义容器 vue如何自定义组件_Vue


你可能会有头部导航、内容区、侧边栏等组件，每个组件内部又包含了导航链接、博文之类的组件。

为了能在模板 中使用，这些组件必须先注册以便 Vue 能够识别。

组件的注册

在 Vue 中，组件的注册分全局注册和局部注册两种：

  • 全局注册：用 Vue.component 来创建组件，注册之后可以在任何新创建的 Vue 根实例中使用；
  • 局部注册：在单个 Vue 格式的文件中创建组件，在需要用到的地方进行注册；

但通常我们都是基于 Vue 工程进行开发的，会用到 webpack 这样的构建系统，而通过全局注册的组件在构建系统中即使没被使用依然会存在于构建结果中，所以我们通常选择局部注册。

组件的创建

每个 Vue 格式的文件都可以作为一个组件来使用。

组件的局部注册

  1. 首先我们需要有一个 Vue 格式的文件

在通过 vue-cli 创建的 vue 工程中默认存在一个组件 HelloWorld.vue：

vue 如何自定义容器 vue如何自定义组件_自定义组件_02


这个文件中有些基础内容，由于内容过多，我们进行了删减，留下了一个标题和一个段落，我们可以在文件中指定组件名称：

vue 如何自定义容器 vue如何自定义组件_Vue_03


注意 template 里的根元素只有一个。

  1. 将其作为组件，在 App.vue 中使用，组件可以重复使用：

小结一下：
组件的局部注册需要：

  1. 一个组件文件 HelloWorld；
  2. 在需要使用组件 HelloWorld 的 vue 文件 App 中引入组件 HelloWorld；
  3. 在 App 的 components 中注册组件 HelloWorld；
  4. 在 App 的 template 中使用组件；

当组件树形成时，组件间就有了层级关系，像上面这样的组件使用中，App.vue 就是父组件，而在它内部使用的 HelloWorld 就是子组件。

组件中的数据

自定义组件内的数据 data 必须是一个函数：

data: function () {
  return {
    count: 0
  }
}

重复使用的组件间的 data 是相互独立的。这一点是很重要的.