组件系统是vue的一个重要的概念。他可以让我们使用独立的，可复用的小组件来构建大的复杂的应用，任何应用都可以看作是组件树。组件可以看做是自定义的Html代码。可扩展的html，封装可重用的html。
使用组件的使用分为三步
创建组件构造器，调用Vue.extend()创建，这是Vue构造器的扩展。他有个选项对象。选项对象有个template属性，定义组件要渲染的html
注册组件 ，Vue.compontent()注册
使用组件（在Vue实例的作用范围内使用组件，必须挂载在实例下，否则不生效）
举例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app1"> <my-component></my-component> </div> <div id="app2"> <my-component></my-component> </div> </body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"> </script> <script> var mycomponent = Vue.extend({ template:'<div>啊啊啊，苍天大地</div>' }); var app1 = new Vue({ el: '#app1', components : {'my-component' :mycomponent} }) //以下就没效果 var app1 = new Vue({ el: '#app2', }) </script> </html>
my-component是注册在#app1下的。所以不能在其他Vue实例下使用。
在组件中使用其他组件就构成了父子组件关系。
待续....