前端MVVM框架之“Vue.js组件篇”

前言: 相信看过上一篇“Vue.js入门”的同学，对Vue大概有了一定程度上的了解。废话不多说，今天我们接着聊Vue的组件系统!

为什么说：“组件系统是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、父子通信(父子关系)