通常组件传参是有两种情况
- 父子组件进行传参,这时候通常利用props
- 非父子组件传参,这时候一般利用vuex
会有一种情况隔代组件传参,这时候可以利用props一层一层传递下去,但是代码就比较乱了
所以就有了 provide/inject
进行隔代组件传递
参考:link
例:components\globe\viewer.vue
<template> <el-row type="flex" class="index"> <el-col> <slot v-if="viewerLoad" name="left"></slot> <div :id="id" class="globe-container" ref="viewer"> <slot v-if="viewerLoad"></slot> </div> <slot v-if="viewerLoad" name="right"></slot> </el-col> </el-row> </template>
可以看到里面有插槽。将屏幕分为左中右三块。中间很明显是地球,别名viewer
在调用viewer.vue时,可以这样调用
Viewer.config
Viewer: { style: { '100%',height:"100vh"}, url: 'config/config.json', success: this.handleViewerSuccess, options: { homeButton: true, } },
>>浅谈vue中provide和inject用法:https://www.jianshu.com/p/d34a7df4cd6a
>>详解VueJs中的V-bind指令:https://www.jb51.net/article/139306.htm
>>css3的vw单位,vh单位的讲解,以及vw vh的兼容性:https://blog.csdn.net/u011200562/article/details/105192051/
viewer的初始化:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
initglobe() { if (window.viewer) return; globe.createMap({ id: this.id, url: this.url, data: this.data, success: this.initAtglobeSuccess, serverURL: this.serverURL, ...this.options }); }, initglobeSuccess(viewer, config) { //开场动画 viewer.globe.openFlyAnimation(); // 通过事件总线分发 EventBus.$emit('ViewerLoad',viewer,config,this.$refs.viewer) window.viewer = viewer; this.config = config; this.$viewer = this.$refs.viewer // url参数处理 const { x, y, z, heading, pitch, roll } = { x: this.getQueryString('x'), y: this.getQueryString('y'), z: this.getQueryString('z'), heading: this.getQueryString('heading'), pitch: this.getQueryString('pitch'), roll: this.getQueryString('roll') } if(x || y || z || heading || pitch || roll){ const camera = window.viewer.globe.getCameraView() window.viewer.globe.centerAt(Object.assign(camera,{ x, y, z, heading, pitch, roll})); } // Cesium 1.61以后会默认关闭反走样,对于桌面端而言还是开启得好, viewer.scene.postProcessStages.fxaa.enabled = true; // 鼠标滚轮放大的步长参数 viewer.scene.screenSpaceCameraController._zoomFactor = 2.0; // IE浏览器优化 if (window.navigator.userAgent.toLowerCase().indexOf('msie') >= 0) { viewer.targetFrameRate = 20; // 限制帧率 viewer.requestRenderMode = true; // 取消实时渲染 } // 禁用默认的实体双击动作。 viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); // 二三维切换不用动画 if (viewer.sceneModePicker) { viewer.sceneModePicker.viewModel.duration = 0.0; } console.log('>>>>> 地图创建成功 >>>>'); // 绑定对alert的处理,右键弹出信息更美观。 window.haoutil = window.haoutil || {}; window.haoutil.msg = (msg) => { this.$message.success(msg); }; window.haoutil.alert = (msg) => { this.$message.success(msg); }; this.viewerLoad = true this.success && this.success(viewer, config) },
provide:
provide () { const _this = this; return { get config () { return _this.config; }, get $viewer() { return _this.$viewer; } } },
this表示:该地球所在的vue
this.$viewer表示:该vue页面上的$viewer
所以,可以看出cesium的初始化是在viewer.vue就进行完的
初始化完成后,就发出一条eventbus指令
EventBus.$on('ViewerLoad',(viewer,config)=>{//监听事件onLoad。 window.viewer = viewer; this.config = config; })