Vue组件概述

      组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

1.组件的创建和注册步骤

（1）Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器；

（2）Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML；

（3）使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签也就名称，第2个参数是组件构造器；

（4）组件应该挂载到某个Vue实例下，否则它不会生效；

2.Vue.extend构造器

Vue提供了Vue.extend(options)方法，创建基础Vue构造器的“子类”，参数options对象和直接声明Vue实例参数对象基本一致。

由于Vue本身是一个构造函数(constructor)，Vue.extend()是一个继承于方法的类（class），参数是一个包含组件选项的对象。它的目的是创建一个Vue的子类并且返回相应的构造函数。

Vue.extend创建的是一个组件构造器，而不是一个具体的组件实例；Vue.extend尝尝结合Vue.component来生成组件，最终还是需要通过Vue.component注册才可以使用。

Vue.extend使用说明代码例子

var Child=Vue.extend({
  template:"#child",
  //不同的是el和data选型都需要通过函数返回值赋值，避免多个组件实例共用一个数据
  data:function () {
    return {}
  }
})
Vue.component('child',Child)//全局注册子组件
<child ...></child> //子组件在其他组件内的调用方式

3.Vue.component

    使用Vue.component()方法注册该构造函数。Vue.component()实际上是一个类似于Vue.directive()和Vue.filter()的注册方法，它的目的是给指定的一个构造函数与一个字符串ID关联起来。之后Vue可以把它用作模板，实际上当你直接传递选项给Vue.component()的时候，它会在背后调用Vue.extend()。