vue组件（Vue+webpack项目实战系列之三）

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。特别对于大型应用开发来说，尽量组件化，并且先造好轮子库，不要重复去写组件，这会显著提升项目开发效率。（当然自己不想写组件的童鞋也可以引入第三方库）。

自己写组件我们弄清楚以下五个问题：

1、组件是什么；

2、组件写好了怎么在项目中使用；

3、调用组件我需要从外界获取数据或者属性怎么办；

4、组件内部需要传递数据或者事件出去怎样做；

5、弄清楚组件化。

下面我们用一个常用的footer组件来讲解。

第一：组件是什么？

组件其实就是 .vue 文件一种另外的写法而已，有自己的属性（props）和方法（methods）。一下就是一个简单底部组件。

第二：组件写好了怎么在项目中使用？

　　当你自己写了一个组件之后，要在项目中引用起来，那么此时需要注册。全局注册或者局部注册，各位大侠肯定看名称也知道，全局注册就是只用注册一次在项目中全局都可以用，局部注册则是只在当前Vue文件使用。组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例之前注册了组件。

第三：调用组件我需要从外界获取数据或者属性怎么办？

　　这里就涉及到父子组件之间的通讯——信息传递。父给子组件传信息=》通过子组件的props（属性），在视图中使用的时候通过属性的形式传值，就按照这个footer组件来说在调用footer的Vue文件里面需要传递一个信息给footer组件，比如说需要父组件控制这个footer显示还是隐藏，那么就用子组件里面定义的isShow属性，通过视图里面使用isShow属性绑定一个值传递（如果不是绑定的值不需要前面的冒号，不然会报错），使用方式如下：

　　传入：

　　接收：

第四：组件内部需要传递数据或者事件出去怎样做？

　　这其实就是子组件向父组件传递信息；使用$emit去触发父组件里面通过$on绑定的事件。

父组件接收事件：

注：在Vue2.3.3版本有父子组件有双向机制数据

第五：弄清楚组件化

就是项目中尽量组件化，避免重复造轮子，能提取成组件尽量提取！减少代码量。