vue中的inject

通常组件传参是有两种情况

1. 父子组件进行传参，这时候通常利用props
2. 非父子组件传参，这时候一般利用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: { width: '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的初始化：

  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;
        })