vue学习：第一课

如何划分应用的结构

拿到一个设计，前端人员想到的第一个问题应该就是，我该如何划分前端程序结构。按功能划分是最常用的划分方式了，在界面设计的时候，我们就已经将功能归类并整理了。同类功能被整合进一个页面当中或一个导航页面当中。而Vue是基于组件的框架。这里产生了一个问题：页面和组件什么关系？

页面与组件

页面的概念要大于组件，一个页面可能包含多个组件。而在实践中，一个组件最多只占一个页面。组件采用单个vue文件来定义。页面采用html文件定义。PC端，H5端和App端在文件组织上有什么区别吗？基本上，我需要将首页对应到最顶层的index.html文件上，在vue中就是App.vue。然后将各个页面对应到各个vue组件，页面vue包含多个组件。这就是基本程序的划分了。

如何划分组件

从组件的大小上来说，组件可以分为容器组件（也可以称为页面组件）和展示组件（小组件，真正的组件）。通常一个页面就是一个容器组件。而展示组件怎么划分？有哪些类别？这是问题的核心。基本上可以按照两种分类标准进行划分：一是按照功能划分；二是按照页面位置划分。我认为这两种方式是需要结合的，可以在大的层面按照页面位置来划分，小的方面按照功能来划分。

数据流的分析

确定了组件之后，我们还要梳理数据流，最后变成组件之间的通信。基本上，组件之间的通信可以分为人与组件的通信、父组件（也就是容器组件）与子组件的通信，以及子组件之间的通信，还有很重要的一点，组件与后端服务器的通信。
从可用的通信方式上来看：有props通信、axios通信、v-model通信、人机交互事件响应通信、自定义事件通信。
父组件与子组件之间的向下通信，采用props来定义；子组件向父组件通信，采用事件来定义：子组件通过emit函数创建事件；父组件通过@事件监听相应的事件并处理。
组件与用户之间的通信，可以采用@input事件来处理，可以使用v-model来简写。组件内部要emit发送input事件。
组件与服务器之间的通信采用axios库完成，关键在于定义url路径与数据。父组件，也就是容器组件或页面涉及到与后端通信，其它组件不涉及。另外，组件内部通信采用data。

vue通信.png

1容器组件与后端的通信

在容器组件加载时，通过axios与后台进行通信，获取数据，保存到自己的data数据中。
当有子组件需要向服务器传送数据时，通过组件的事件响应函数，在内部通过axios发送给后端。

2子组件之间的通信

这一点需要单独拿出来讲，因为子组件之间的通信使用到了通信总线的概念。组件之间的通信，都通过总线进行传输。发送方通过bus.emit方法来发送事件（事件名，数据）；接收方通过bus.on监听事件，并提供回调处理数据（事件名，回调函数）。

3用户与组件之间的交互

模块划分

从大到小，从全局到细节。模块的划分可能不会这么早，一开始可能考虑不到这么细节。但是它的概念，有必要说一下。模块是在组件下面的一个概念，比组件小；组件一般都会带界面、带交互；而模块更多是不带界面，是一个单独的JavaScript文件。模块与模块之间，采用变量和函数的直接调用进行通信。