承接上一篇，我们将继续介绍如何编写一个组件，组件之间如何通信，如何解决组件通信的一些缺陷，最后是如何结合arcgisjsapi创建vue项目传送门：Vue+ArcGISAPIforJavaScript构建前端GIS应用（一）Vue+ArcGISAPIforJavaScript构建前端GIS应用（二）Vue+ArcGISAPIforJavaScript搭建前端GIS应用（三）p.s.：结合示例代码拍出效果更棒：https://github.com/GlennLuo19...组件怎么写？示例代码：https://github.com/GlennLuo19...如何编写单文件组件？下面用一个简单的案例来说明。该组件包括一个用于计数的状态计数，以及两个分别用于增加和减少计数的按钮。数据和事件的声明和绑定首先我们需要做的是编写组件视图层，很简单3个标签，1个div，2个按钮数据声明：这时候我们需要在里面新建一个数据选项该模块，在其中注册一个状态计数数据绑定：使用双大括号将数据绑定到标签。方法注册：在methods选项中注册方法。在方法中我们直接操作刚刚注册的count状态绑定事件：使用v-on:命令或者简称@进行事件绑定，这样逻辑就完成了。该方法直接操作状态。一旦状态更新，Vue立即响应并更新dom。另外还有component、props、computed选项，这里就不介绍了。生命周期钩子函数下面介绍一个重要的概念，生命周期钩子函数。还是用刚才的例子，看看如何使用生命周期钩子：现在组件使用三个常用的生命周期钩子函数：created、mounted、update，分别在组件创建时执行、组件安装后执行、执行安装组件后。在更新组件状态后执行。效果见示例。我们可以使用生命周期来实现一些逻辑。比如组件与后台通信获取初始化数据，可以在挂载函数中进行。组件如何通信？示例代码：https://github.com/GlennLuo19...一个独立的组件很难实现一个比较完整的业务逻辑，所以组件之间的通信在所难免。下面用一个例子来说明父子组件是如何相互传值的。先介绍一下示例代码的结构：App组件包含一个子组件parentComponent；parentComponent包含一个子组件childComponent。这里是vue的组件选项，就是注册子组件，作为标签放到模板中。ParentComponent和childComponent是父子组件关系，可以看一下页面。如果子组件想使用父组件的一些数据怎么办？首先，父组件有一个状态消息，然后将消息作为参数传递给子组件。我们在子组件中使用props选项来接受传递给父组件的值。这个值可以直接绑定为状态。演示：点击父组件，子组件如何给父组件传值？首先，父组件声明一个方法：获取一个数据，存放在自己声明的一个状态childMsg中，将这个方法注册到子组件中。在子组件中使用this.$emit方法以自身的值作为参数触发父组件挂载的事件。两种方式不同：父组件主动给子组件传值；孩子对父母是被动的。但是问题来了：兄弟组件如何通信？多级组件之间如何通信？Vue的生态系统可以帮助解决这个问题。正如前面在Vue生态系统中提到的，Vue是一个渐进式框架。仅仅依靠上面介绍的Vue核心库是很难满足一个项目建设的需要的。同时，Vue固有的问题如：组件间通信困难等问题也难以解决。但是借助vue生态系统，让vue具备了创建工程应用的能力。这里只是简单介绍一下Vue生态的内容，什么时候使用呢？如何使用？将在后面的案例中进行演示。Devtools：浏览器插件，方便开发使用。VueLoader：Webapck中的加载器，用于翻译.vue文件，使单页组件可用。如果你想用webpack手动配置Vue项目，这个loader是必不可少的。VueCli：VueCli可以帮助快速开发一个vue项目。提供vue-cli以交互方式快速搭建项目的脚手架。基于webpack构建，合理的默认配置，减少配置时间，绕过webpack的陷阱。丰富的官方插件集合，集成了前端生态系统中最好的工具。VueRouter：控制vue的路由。Vuex：状态管理机，构建全局状态和局部状态，解决组件间的通信问题。使用vue搭建前端工程项目开发环境：node.jsnpm或yarnIDE：VSCode、Webstorm介绍适合vue前端开发的vscode插件项目搭建：解决方案：使用webpack配置vue环境；这里可以应用现代前端工具链基于webpack配置项目，但是配置过程复杂，需要丰富的经验，容易遇到坑，影响项目启动的进度。简化方案：使用vue生态中的vue-cli构建项目（重点介绍和演示，包括使用控制台指令和可视化界面vueui创建）；集成GIS示例代码：https://github.com/GlennLuo19...如何与arcgisjsapi集成？用npm安装arcgisapi后，我们不能直接将api导入到项目中，因为我们的项目是es模式的模块化规范，而arcgisapi是基于Dojo框架下的AMD模式。因此，如果我们要在我们的项目中使用arcgis，就必须借助其他工具，这个工具就是esri-loader。搭建一个简单的WebGIS综合案例：vue+vue-cli+vuex+vuerouter+esri-loader技术栈本例实现的内容：使用前端路由vuerouter实现模块的切换：首页和地图模块中集成了地图模块，使用了arcgisapi，使用arcgisapi实现了添加图层和删除图层的功能。这里分了两个不同的组件map和mapControl。使用vue的dev工具查看modules的划分。map和mapControl是两个独立的组件，但是逻辑功能是耦合的，需要通过组件来传递。这里使用vuex作为通信方案，实现mapControl组件对地图组件的控制。先看一下项目的文件结构：dist文件是最终产品文件夹node_modules是项目的第三方js库公用文件夹主要存放html模板，最终的vue实例挂在这个html上src存储源代码。开头的文件。是各种插件的配置文件。比如eslintrc是eslint的配置文件，babel.config.js是babel的配置文件，vue.config.js是vue-cli的配置。package.json文件是项目的包管理配置文件。专注于源代码。assets文件夹存放图片、字体等前端静态资源。组件用于存储细分的组件。Views是Vue中存储模块层级的组件。我们的项目包括home模块和myMap模块，就是刚才看到的通过路由切换的模块。App.vue是最大的组件，它最终会附加到入口文件main.js中的html模板中。router.js写vue的相关内容routerstore.js写vuex的内容frommainjs,这个声明了一个vue实例，启用了vuex和vuerouter的初始化，把应用级组件app挂在html模板id上了在应用程序的div上。应用组件是应用程序的整体框架。这里有两个router-link标签跳转到前端路由。router-view相当于一个占位符，代表某个路由对应的组件。在router.js中我们可以看到/对应的是Home组件；/map对应MyMap组件。延迟加载。当我们进行路由跳转时，我们可以切换组件。Home组件我们就不介绍了；重点关注myMap组件myMap中注册的两个组件：map和mapControl，在地图组件中，我们启用esri-loader，在挂载的钩子函数中，arcgisapi地图类和视图类的初始化。最后我们使用了initMap和initView这两个函数，它们是vuex中定义的mutations。下面我们来看看vuexstore是怎么写的：一个store最重要的就是state,mutation,actions，就像options：state的意思是state类似于vue中的data，可以理解为application-leveldatamutation(change)用来写一些改变状态的函数，要求是一个纯函数action(action)用来写一些业务逻辑包括一些一步流程项目声明了3个states：map:用来存储应用view中的map实例：用于存储应用中的view实例layercount：用于记录层数在mutation中，写两个函数initMap：即在map组件中实例化的地图初始化状态中的地图initView：类似于map，是初始化视图，当这两个对象被vuex管理后，应用中的所有组件都可以调用vuex中的mutation或action方法，并添加自己的参数来操作mapob喷射。这里在action中写了两个方法，分别是增加图层和删除所有图层。回到mapControl组件，我们使用mapActions方法将vuex中的两个action引用到组件中，分别挂在两个按钮的点击事件上。也可以看到我们也将vuex中的layerCount状态绑定到组件的标签上，可以像数据一样响应式渲染。总结一下：webGIS一般都是以地图为核心，我们可以把地图对象交给vuex来管理，地图的运行逻辑也可以分离出来写在vuex中。其他一些应用级对象也是如此。这样我们就可以避免大部分的沟通问题。最后，我想补充一点：通过结合一些流行的UI框架，比如ElementUI或antdesign，我们可以帮助我创建更好看和更具交互性的webGIS应用程序。
