先说一下vue组件封装的优点
组件(Component)是Vue.js最强大的功能之一
组件可以扩展HTML元素，
封装可重用代码 组件是可复用的Vue 实例 

组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。

然后再说下 封装组件要做的一些准备

在我用vue开发项目的时候，一般我都会用到组件封装，采用组件化的思想进行项目开发，我在搭建一个项目的时候，就会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，

commen中放公共组件（如：head（公共头组件）foot（公共底部组件）等），

feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）

最后说一下组件封装的大概过程
使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。但是我们一般用脚手架开发项目，每个 .vue单文件就是一个组件。在另一组件import 导入，并在components中注册，子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。