如果有朋友对Vue基础还不够了解的可以先看下官方的教程 http://doc.vue-js.com/v2/guide/ 这个是官方的网址，官方的教程还是写的简单易懂的。
Component是Vue.js最核心的功能，个人认为component(组件)和directive(指令)撑起了Vue的半壁江山。使用组件主要是提高代码的复用性减少代码。
讲到这个想到一个心痛的事情，项目加了个新需求在一个input上添加热搜，但是原来的input有多种功能已经由组件编写，我觉得在这个组价上再添加热搜功能的话代码耦合性太大了，而且如果业务修改这个组件改动会很大，就没有当初减少工作量的初衷了，就是单独写了个搜索展示的组件，因为在同个界面上外部有多个热搜，导致事件注册覆盖。挺难受的，下面开始正题。
首先组件需要注册，注册分为两种。全局注册可以在整个项目中使用，局部注册只能在当前定义的界面中使用。
全局注册
Vue.component('组件名称'，{})局部注册
new Vue({ el:'#app', components:{ '组件名称'：{ } }})上面讲的只是声明注册，如果这样的项目中使用的话是展示不出东西的，没有内容的。在组件中添加 template 属性就可以展示了。
Vue.component('my-component'，{ template:'<div style="color:red;">这里全局组件</div>'})展示效果
template中必须包有元素，直接展示文字是没有效果的
组件也是Vue的一部分，能单独存放数据存放的方式和new Vue一样声明在data中。多个相同组件data中数据不共享。
Vue.component('my-component'，{ template:'<div style="color:red;">这里全局组件</div>'， data:function(){ return{ datas:"存放数据", } }})Vue 1x时组件传递数据是双向流的，但应该安全和数据操作问题到了2.x组件数据传递边成了单项的。使用props来接受外部传入组价中的数据。props中数据接受到对象后改变后不会改变外部传递对象的值。
Vue.component('my-component'，{ template:'<div style="color:red;">这里全局组件</div>'， data:function(){ return{ datas:"存放数据", } }, props:{ message:{ } }})在外部使用时，如果传递对象是对象 a='入参' <my-component :message=’a‘></my-component>
如果直接是数据 <my-component message=’入参‘></my-component> 就无需：。
props还有参数校验避免数据格式导致的报错。
type(类型校验)：String Number Boolean Object Array Function 可以一次多种数据类型，是||的关系。
type:[Boolean,Object]
default 默认值（boolean）
required 必传值 （boolean）
Vue.component('my-component'，{ template:'<div style="color:red;">这里全局组件</div>'， data:function(){ return{ datas:"存放数据", } }, props:{ message:{ type:[String,Object], //既可以是字符串也可以对象 参数类型 default:'默认值'， //如果参数不传就会使用默认值 required:true, //参数是否必传 true 必传 会有报错提示 false不必传（默认） } }})讲了下组件的基础，后续还会跟进。