Vue组件（Component）

组件（Component）是Vue最核心的功能部分，也是整个框架设计最精彩的地方，当然也是比较难掌握的。每个开发者都想在软件开发过程中使用之前写好的代码，但又担心引入这段代码会对现有的程序产生影响。Web Components的出现提供了一种新的思路，可以自定义tag标签，并拥有自身的模板、样式和交互。

什么是组件

在正式介绍组件前，先看一个Vue组件的简单示例感受一下，代码如下：
组件是可复用的Vue实例，且带有一个名字，在这个示例中组件名字是button-counter 。可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义标签来使用，代码如下：

Web的组件其实就是页面组成的一部分，好比是计算机中的每一个硬件（如硬盘、键盘、鼠标等），它具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，从而变成一个完整的应用。
Web页面就是由一个个类似这样的部分组成的，例如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。
前端组件化的核心思路就是将一个巨大且复杂的页面分成粒度合理的页面组成部分。
使用组件的好处：
（1）提高开发效率。
（2）方便重复使用。
（3）简化调试步骤。
（4）提升整个项目的可维护性。
（5）便于协同开发。
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以以原生HTML元素的形式存在，以is特性扩展。
组件系统让我们可以用独立可复用的小组件构建大型应用，几乎任意类型应用的界面可以抽象为一个组件树，如图

组件的基本使用

为了能在模板中使用，这些组件必须先注册以便Vue能够识别。这里有两种组件的注册类型：全局注册和局部注册。

全局注册

全局注册需要确保在根实例初始化之前注册，这样才能使组件在任意实例中被使用。全局注册有3种方式。
要注册一个全局组件，我们可以使用Vue.component（tagName，options），代码如下：

Vue.component('my-component',{
  //选项
})

my-component就是注册组件的自定义标签名称，推荐使用小写字母加“-”分隔符的形式命名。组件在注册之后，便可以在父实例的模块中以自定义元素的形式使用，示例代码如下：
注意：
（1）template的DOM结构必须被一个而且是唯一根元素所包含，直接引用而不被“div /div ”包裹是无法被渲染的。
（2）模板（template）声明了数据和最终展现给用户的DOM之间的映射关系。
除了template选项外，组件中还可以像Vue实例那样使用其他的选项（5.3节将详细讲解），例如data、computed、methods等，但是在使用data时和实例不同，data必须是函数，然后将数据利用return返回，代码如下：
Vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其他实例也会受影响。

上面解释了data不能为对象的原因，这里简单地讲一下data为函数的原因。data为函数，通过return返回对象的复制，致使每个实例都有自己独立的对象，实例之间可以互不影响地改变data属性值。

使用Vue.extend配合Vue.component方法，代码如下：

将模板字符串定义到script标签中，代码如下：

同时，需要使用Vue.component定义组件，代码如下：

Vue.component('account',{
      template:'#tmpl'
    });

完整示例代码如下：

局部注册

如果不需要全局注册或者只让组件使用在其他组件内，可以采用选项对象的components属性实现局部注册，示例代码如下：

DOM模板解析说明

当使用DOM作为模版时（例如，将el选项挂载到一个已存在的元素上），会受到HTML的一些限制，因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容。尤其像这些元素ul 、ol 、table 、select 限制了能被它包裹的元素，而一些像option 这样的元素只能出现在某些其他元素内部。
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：
自定义组件有时被认为是无效的内容，因此在渲染的时候会导致错误。这是因为使用特殊的is属性来挂载组件，代码如下：
也就是说，在标准HTML中，一些元素只能放置特定的子元素，而另一些元素只能存在于特定的父元素中。例如table中不能放置div，tr的父元素不能为div等。所以，当使用自定义标签时，标签名还是那些标签的名字，但是可以在标签的is属性中填写自定义组件的名字，
示例执行效果如图
从图中不难发现直接引用my-row 组件标签并没有被table 标签包裹，而用is特殊属性挂载的组件可以达到所需效果。注意：如果使用的是字符串模板，则不受限制。