vue与SuperMap for WebGL学习笔记（二）——运用props传递viewer （待整理）

前面说到了创建一个viewer.vue，那么如何把viewer这个参数传值到子组件中呢，我个人是用了props。

先是创建一个子组件visible.vue，然后需要在viewer中引入这个visible子组件。
引入import visible from './visible'
注册components: {visible},
使用<visible ></visible>

Step 1
根据vue的生命周期来说，先是在data中给一个参数值为空viewer_props:''，然后等生命周期结束的时候，通过<visible :viewerP='viewer_props'></visible>赋予viewerP值，这个时候viewerP也是空值，但是已经传入子组件visible中了，所以在visible组件的生命周期中viewerP目前还是空的。
Step 2
在viewer.vue组件中，在mounted中写入this.viewer_props = window.$viewer，重新对viewer_props赋值。
Step 3
在visible子组件中，写上watch来监听viewerP的变化，监听完了后viewerP就已经有数值了，最后就可以使用viewerP了，也就是我们在viewer.vue中定义的window.$viewer

代码
viewer.vue

<template>
    <div id="cesiumContainer" v-bind:style="styleObject">
     
      <visible :viewerP='viewer_props'></visible>
    </div>
</template>
<script src="../js/jquery.min.js"></script>


<script>
  import $ from 'jquery'
  import visible from './visible'



  export default {
    name: 'Viewer',
    components: {
      visible
    },

    mounted: function () {
      window.$viewer = new Cesium.Viewer('cesiumContainer',{
        infoBox:true,
        timeline:false
      }) //给data中viewer赋值
      this.viewer_props = window.$viewer
      window.$promise = window.$viewer.scene.open("http://localhost:8090/iserver/services/3D-pz/rest/realspace");
      $(".cesium-widget-credits")[0].style.visibility = "hidden";
      $(".cesium-viewer-navigationContainer")[0].style.visibility = "hidden";
    },

    data: function () {
      return {
        styleObject: {
          width: '100%',
          position: 'absolute',
          top: '0px',
          bottom: '0px',
          left: '0px',
          backgroundColor: '#000000'
        },
        viewer_props:''
      }
    },
  }
</script>

<style>
</style>

visible.vue子组件

<template>
</template>
<script ></script>
<script>
    export default {
        name: "visible",
        props:['viewerP'],
      data() {
        return {
			console.log(this.viewerP)
        }
      },
      methods: {
		function (){
            console.log(this.viewerP);
          }
      },
      watch: {
        viewerP(value) {
            this.viewerP = value
          }
      }
    }
</script>

<style scoped>

</style>