springboot项目中添加大屏页面

在非前后端分离的项目中根据项目需求需要添加一个大屏页面

解决方案：

参考：纯静态引入.vue文件之http-vue-loader.js - 知乎

我是把httpVueLoader.js 下载到本地引入

引入http-vue-loader.js

在vue代码中

 components: {   // 注意component 下name的命名，需要为全小写

            'lefttop': httpVueLoader('leftTop.vue'),

            'leftcenter': httpVueLoader('leftCenter.vue'),

        },

类似这种文件目录：

图片 出不来了，后期方便话补上，就是都在同级目录下组件的vue文件和index.html

组件间通信方式：

一、

js触发主页面方法

window.screenvue =  new Vue({.....

window.screenvue.getMap('map',true)

window.screenvue.setFromMapData(params.data)

主页面触发js方法

parent.setMapData(this.divisionInfo, params)

二、

组件到主页面

this.$emit('handetree', data)

页面到组件

self.$refs.leftTop.setData(params)

组件与组件

组件到页面再调用页面到组件

注意二下面方法的使用需要

<centertop ref="centerTop" @handetree="handetree" @setscreendata="setscreendata"></centertop>

在组件的引入时候添加 ref 及方法的对应方法名