开发一个封装iframe的vue组件代码示例

export default {
  props:,//标记里的属性
  data() {//公共变量
  },
  created() {//加载时？
  },
  mounted() {//加载完毕时
  },
  methods: {//公共方法
  }
}

  
		...
  
  
    

		...
    

地图组件Map.vue对应iframe部分，详见一.2中的代码

export default {
		。。。
    mounted() {
	    //监听iframe的消息
      window.addEventListener('message', this.handleMessage)
      //获得iframe的window对象
      iframeWin = this.$refs.iframe.contentWindow
    },
    methods: {
      iframeLoad() {
        this.isLoaded = true;
        window.console.log("map is ready")
      },      
      async handleMessage() {//接收来自iframe的消息
        this.require = iframeWin.require;
        this.iMap = iframeWin.iMap;
      },
      loadLayer(nodes,servers){
      	//加载图层
        this.iMap.layerHandler.load(nodes,servers);
      }
    }
  }

四、外部接口

Map.vue是一个组件，它要跟它所在的组件或页面进行通信。

现在，Map.vue放在了一个容器页面Home.vue（即测试页面）里，里面还有一个命令组件Layer.vue。点击命令组件里的按钮，地图要做出相应的响应。其中的原理如下：

命令组件的按钮点击后，发射信息到容器页面，然后容器页面调用地图组件的方法。

测试页面Home.vue

命令组件Layer.vue

注意命令组件发射消息中指定的方法，在容器页面中都有相关的属性与之对应：

命令组件
loadCloud(){
  let data = ...;
  this.$emit("loadCloud", data);
},

容器页面

五、运行结果