接着上篇，继续介绍如何编写一个组件、组件间如何通行，如何解决组件通讯的一些硬伤，最终如何结合arcgis js api创建一个vue项目

配合示例代码服用效果更佳：

如何去编写一个单文件组件呢？下面使用一个简单的案例进行说明。

该组件包括一个状态count用于计数，两个按钮分别增加与减少count。

数据与事件的声明与绑定

首先，我们要做的是组件视图层的编写，很简单的3个标签，1个div、2个button

1. 数据声明：这时候就需要在模块中新建一个data选项，在里面注册一条状态count
2. 数据绑定：使用双大括号的形式把数据绑定到标签上。
3. 方法注册：在methods选项中进行方法的注册。在方法中，我们直接操作的是刚刚注册的count状态
4. 绑定事件：使用v-on:指令或者简写使用@，进行事件绑定

这样逻辑就完成了。方法直接操作状态，状态一旦更新，vue随即响应，对dom进行更新。

下面介绍一下重要的概念，生命周期钩子函数。

仍然用刚刚的例子去看一下生命周期钩子怎么用：
现在组件使用了created、mounted、updated三个常用的生命周期钩子函数，他们分别在组件创建好时执行、在组件装在完毕后执行、在组件状态更新后执行。效果请看例子。

我们使用生命周期可以实现一些逻辑。比如组件与后台的通信获取初始化数据就可以在mounted函数里面进行。

某一个独立的组件很难实现一个比较完整的业务逻辑，因此组件间的通信是不能避免的。

下面就用一个例子说明父子组件之间是如何互相传值的。

首先介绍一下例子代码的结构：

1. parentComponent与childComponent为父子组件关系，可以看一下页面。如果子组件想使用父组件的某个数据怎么实现呢？ 首先父组件具有一个状态msg，然后把msg作为一个参数，传给子组件。
2. 我们在子组件中使用props选项接受到父组件传的值。这值是可以直接作为状态绑定的。
3. 子组件向父组件如何传值？首先父组件声明一个方法：获取一个数据存到自己声明的一个状态childMsg里面，并且把这个方法注册到子组件上。
4. 在子组件里面使用this.$emit方法就可以把自己的值作为参数，激发父组件挂载的事件。

两种方式是不同的： 父组件向子组件传值是主动式的；子向父是被动式的。

但是问题来了：兄弟组件如何通信？多层级组件之间怎么通信？
vue的生态系统可以帮助解决以这个问题。

前面说到过，vue是一个是渐进式框架，仅仅依靠上面介绍的vue核心库很难满足一个工程项目建设的需要，同时vue原生存在的问题如：组件间通信困难的问题难以解决。但是在vue生态系统的帮助下，让vue有能力创建一个工程应用。在这里只是对vue生态的内容进行简单的介绍，具体何时使用？怎么使用？会在后面的案例中进行演示。

浏览器插件，便于在开发中使用。

Webapck中的一个loader，用于转译.vue文件，让单页组件可用。如果是想用webpack手工进行vue工程项目配置的话，这个loader是必不可少的。

通过Vue Cli可以帮助快速开发一个vue工程项目。提供vue-cli可以交互式的、快速的搭建一个项目的脚手架。它是基于 webpack 构建，并带有合理的默认配置，减少配置时间，绕过webpack这个坑。一个丰富的官方插件集合，集成了前端生态中最好的工具。

状态管理机，构建全局状态和局部状态，解决组件间通信问题。

用Vue构建前端工程项目

方案：使用webpack进行vue环境配置；这里就可以应用前面谈主任提到的现代前端工具链在webpack基础上进行项目的配置，但是配置过程繁杂需要丰富的经验，容易遇到坑，影响项目启动的进度。

简化方案：使用vue生态中的vue-cli构建项目（重点介绍，并进行演示，包括使用控制台指令进行创建和使用可视化界面vue ui进行创建）；

我们不能在用npm安装arcgis api后直接用import的形式引用api到项目里来，因为我们的项目是es模式的模块化规范，而arcgis api是基于Dojo框架下AMD模式建立的。所以，想要在我们的项目中使用arcgis就必须借助其他的工具，这个工具就是。

构建一个简单的WebGIS

这个例子实现了哪些内容：

1. 使用前端路由vue router实现了模块的切换：首页和地图模块
2. 地图模块中集成了arcgis api，使用arcgis api实现了添加图层、删除图层的功能。在这里划分了两个不同的组件map和mapControl。使用vue的dev tools可以查看模块的划分。
3. map和mapControl是独立的两个组件，但是逻辑功能是有耦合的，需要进行组件件的通行。这里使用了vuex作为通信方案，实现了mapControl组件对map组件的控制。

先来看一下项目的文件结构：

• dist文件为最终的产品文件夹
• public文件夹主要存放的是html模版，最终的vue实例是被挂在在这个html上的

• assets文件夹存放的是前端的静态资源如图片、字体等
• components用于存放划分很细的组件。
• views是存放vue中模块级别的组件，在我们这个项目中就包括了home模块和myMap模块，也就是刚刚大家看到通过路由切换的模块。
• App.vue是最大的一个组件，最终他会在入口文件main.js中被挂到html模版上。

在app组件是一个应用的整体框架。这里有两个router-link标签，进行前端路由的跳转。router-view等于是一个占位符，表示的是某个路由对应的组件。

在router.js里面我们可以看到/对应的是Home组件；/map对应的是MyMap组件。懒加载。

当我们进行路由跳转时，就可以进行组件的切换。

Home组件我们就不介绍了；重点介绍一下myMap组件

现在我们看看一下vuex的store是如何编写的：

1. state表示状态跟vue中的data类似，这里可以理解为应用级别的data
2. mutation（转变）用来写一些改变状态的函数，要求是纯函数
3. action（动作）用来写一些业务逻辑包括一些一步过程

该项目声明了3个状态：

1. map：用于存放应用中的map实例
2. view：用于存放应用中的view实例

当这两个对象被vuex管理之后，应用里的所有组件都可以调用vuex中的mutation或者action方法加上自己的参数对地图对象进行操作了

这里在action中写了两个方法增加图层和删除所有图层。

回到mapControl组件，我们使用的mapActions方法把vuex中的两个actions引用到组件里面，分别挂在了两个按钮的单击事件上。还可以看到我们还将vuex中的layerCount状态绑定到了组件的标签上，它跟data一样可以响应式渲染。

webGIS一般是以地图为核心，我们可以将地图对象等交给vuex进行管理，对于地图的操作逻辑也可以分离出来写在vuex中。对于其他的一些应用级别的对象也是如此。

这样我们就可以避免了大部分的通信问题。

我们结合一些热门UI框架如element UI或者可以帮我创建更好看的、交互性更好的webGIS应用。

// 组件中的 `data` 必须是函数 并且函数的返回值必须是对象 msg: '注意：组件的data必须是一个函数！！！' // 2 使用：以自定义元素的方式
• extend：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

// 注册组件，传入一个扩展过的构造器
 

• 说明：局部组件，是在某一个具体的vue实例中定义的，只能在这个vue实例中使用

在某些特定的标签中只能存在指定表恰 如ul > li 如果要浏览器正常解析则需要使用is

• 方式：通过子组件props属性来传递数据 props是一个数组
• 注意：属性的值必须在组件中通过props属性显示指定，否则，不会生效
• 说明：传递过来的props属性的用法与data属性的用法相同

 // 创建props及其传递过来的属性
 

 

 方式：父组件给子组件传递一个函数，由子组件调用这个函数
 
 

• 1 最开始的js就是为了实现客户端验证以及一些简单的效果
• 2 后来，js得到重视，应用越来越广泛，前端开发的复杂度越来越高
• 3 旧版本的js中没有提供与模块（module）相关的内容
• 在js中，一个模块就是实现特定功能的文件（js文件）
• 遵循模块的机制，想要什么功能就加载什么模块
• 模块化开发需要遵循规范
• 2 文件依赖（加载文件）
• 4 统一规范和开发方式
// 指定环境为生产环境：vue会根据这一项启用压缩后的vue文件

压缩和抽离CSS报错的说明：
原因：压缩和抽离CSS的插件中只允许 SVG 使用双引号

// 分离 css 到独立的文件中 // bug描述: 生成后面的css文件中图片路径错误，打开页面找不到图片 // 抽离css 的辅助压缩插件 // 移除属性中的双引号
• 1 修改组件的引用方式