组件系统是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实例下使用。
在组件中使用其他组件就构成了父子组件关系。
待续....
vue.js快速入门（三）~组件入门~
原文地址：https://www.cnblogs.com/yizhizhangBlog/p/9319302.html