Vue中父級框架頁調用子級框架頁面中的方法

問題描述：項目中的h5有詳情頁，但是需求要有很多模板，之前是使用框架頁面處理了，就是跳轉到詳情頁，調接口將數據寫到緩存中，再根據模板編號使用iframe打開對應的模板頁面，在模板頁面中直接讀取緩存數據填充頁面。問題來了，詳情頁中有圖片的瀏覽插件ImagePreview，全屏狀態下要控制返回按鈕，如果圖片是打開的要先關閉圖片而不直接返回上個頁面。

解決方法：直接貼代碼了，父頁面主要增加了vue鈎子方法

  beforeRouteLeave(to, from, next) {
    var tempRet = showiframe.window.imageClose();
    if (tempRet == true) {
      window.history.pushState(null, null, document.URL);
      return;
    }
    next();
  },

子頁面中的方法要全局聲明，如果需要使用聲明的變量的話，注意不能用this了。。。

created() {
    var that = this;
    window.imageClose = function() {
      if (that.instanceImage && that.instanceImage.opened == true)     
      {
        that.instanceImage.close();
        return true;
      }
      return false;
    };
  },

    clickjpImg(url) {
      var tempList = [];
      for (var i = 0; i < this.attachListForDemo.length; i++) {
        tempList.push(
          "https://app.xxx.com/" + this.attachListForDemo[i].ImageSrc
        );
      }
      this.instanceImage = ImagePreview(tempList);
    },