前端ABC为什么说：“组件系统是Vue中一个核心的功能呢？”
因为它能帮助我们，提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题…
到底vue的组件系统有什么魅力呢？让我们一起来看看：
一、声明组件
1、普通组件声明方式
在引用vue.js后，首先我们会实例化一个Vue的实例。如下
var Vue = new Vue()
然后在声明组件，如下:
Vue.component('组件名称',{配置项})
我们声明好组件后，如何去调用呢? 伪代码如下:
<div id="parentBox"> <my-component></my-component> //调用声明的组件 </div
注意：所有声明的组件名称中，包含有驼峰写法的组件，得修改成“-”。比如：你的组件名称为:“MyComponent”。那么调用为my-component。
2、单文件组件声明方式
可能有些朋友会问:“什么是单文件组件呢?”
通俗点说：就是以.Vue文件名结尾的组件称为“单文件组件”。如下图:
在一个.Vue文件中
1、样式：style 2、内容：template 3、行为：script 三者分离。
可能我们传统开发组件时，还需要把css、JavaScript、html三者分开来写。而在Vue的单文件组件中却让三者在一起了，这样就变得更加像一个单独的模块。
传统开发一个组件可能是这样，如图所示：
二、组件通信
我们可能在思考一个问题：如果把一个页面抽象若干个组件模块后，组件与组件的数据该如何传递呢？它们又是如何接受数据的呢？…
别急，我们一起来看看在vue中，组件是如何通信的。
1、父子通信(父子关系)
从上图可以看到：子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法
比如:
在父组件中是这样：(伪代码)
<div id="testBox"> <more-list v-on:setVal="getVal"></more-list> </div>
....
methods: {
getVal(val){
console.log('接受来自子组件传递的数据:', val)
}
}
在子组件中可能是这样：(伪代码)
...
watch: {
val (newVal, oldVal) {
//第一个参数为传递出来的方法名,第二个数据。
this.$emit('setVal', newVal)
}
}
2、跨组件通信(不是父子关系)
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
console.log('接受来自父组件的值:',id)
})
可能在项目的复杂情况下，或许Vuex(全局状态管理)是一个不错的选择。关于vuex会在后续文章中详细讲解。感兴趣的朋友可以关注下，在这里就不做过多解释。
三、与传统开发对比
聊了这么多关于Vue的组件式开发，和传统开发相比有着什么样的优势呢？
比如：我们要开发一个项目，拿到效果图可能是这样。如下图:
在传统项目开发中，或许你会把单个模块写成这样。如下图:
而在vue中，可能是这样。如下图:
可能很多同学可能会问：.Vue文件好像不能直接被浏览器解析的，那么怎么办呢？一般项目又是怎么开发呢？
一般我们会采用Webpack作为前端构建工具，使用vue-loader来解析.Vue。把.Vue文件的内容编译成js，最终通过webpack打包上线。这种项目开发方式被称之为“单页面应用(SPA)”
写在最后：Vue的组件系统不但帮我们解决了：效率低、难维护、复用性等问题…还可以让开发者像搭积木一样，用组件拼出一个完整的应用界面。好了，祝大家2017春节快乐，财源广进，万事如意，阖家幸福！鸡年新春大吉！
欢迎分享本文，转载请保留出处：前端ABC » 前端MVVM框架之“Vue.js组件篇”
