全栈开发三（vue组件）

开发vue应用我们首先了解什么是组件，组件要怎么应用？什么时候用组件？组件之间怎么通讯？等一些问题

一、什么是组件

组件（Component）是对数据和方法的简单封装。我个人的理解就是一个个零件，然后关联起来，就成了一个应用；
在vue项目中，所有应用都是为组件服务的，它是个组件化的框，一切都是围着组件在转。

二、那么什么时候我们用到组件呢？

页面，表单，编辑器等等都可以作为一个组件；组件有局部组件，有全局组件。局部组件，就是只能在某个地方用的；全局组件就是整个应用可以用的;
我们先来看一下页面：

未标题-1.png

从上面可以看出来，我们总公用了7个组件，但是我有4个组件是共用的，一个整个页面的父组件。为什么我们要这样做 要把一个input作为一个组件呢？很简单，因为这个组件会在很多页面用到，我们必须地把它分出来，并注册成全局组件，让每个页面都能调用。上传图片这个插件也是表单会用到的，所以也抽出来。按钮也独立出来，因为提交的按钮都一样的，没必要重写很多个。父组件就不必要注册成全局了，因为父组件是一个页面，每个页面放的内容不一样，具体怎么用看项目来。

三、单向数据流

怎么样理解单向数据流。我的理解是只能由父组件向子组件传递数据。或许大家会问， vue不是又向绑定的吗？vue虽然是双向绑定，但那是指在同一个组件下，子组件改变父组件的值。vue子组件Props的数据是由父组件改变。子组件只是把表单的数据用事件发送出去，父组件接收，然后由父组件去改变子组件的值。所以你直接在子组的Props参数赋值会出错的原因为。

四、组件的代码

下一节我们将从一个简单的登录页面写起，正式进入项目的开发，后面有些关于es6 es7的语法也会讲到

后续的文件建我就不在这里再写了，源代码里写得还是很清楚的
源文件都在：https://pan.baidu.com/s/1miMJuYW
项目启动：

gulp

大家有什么建议可以发邮箱到我的E-mail,
我的QQ：1830305999
也可以加入我们的Q群:190949802
我的主页：www.itvwork.com网站还没建好，正在建设中

上一篇：全栈开发二(vue路由的使用)