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

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

本身写组件咱们弄清楚如下五个问题：

一、组件是什么；

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

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

四、组件内部须要传递数据或者事件出去怎样作；

五、弄清楚组件化。

下面咱们用一个经常使用的footer组件来说解。

第一：组件是什么？

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

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

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

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

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

　　传入：

 

 

　　接收：

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

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

父组件接收事件：

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

第五：弄清楚组件化

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