使用自定义数据动态创建组件答案

【问题标题】：Create component on the fly with custom data使用自定义数据动态创建组件
【发布时间】：2018-06-20 08:20:12
【问题描述】：

首先，我不是vue专家，如有误会，敬请见谅

在我的应用中，我需要实现以下功能：每个超时的请求都应该显示一个弹出窗口，用户可以在其中重新发送请求。为此，我正在使用 axios，并创建了一个拦截器来捕获超时请求

export const authenticated = Axios.create({
  timeout: 100,
})

authenticated.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.code === 'ECONNABORTED') {
      //create and show popup
      var ComponentClass = Vue.extend(TimeoutModalDialog)
      var instance = new ComponentClass()
      instance.$mount('#page')
    }
    return Promise.reject(error)
  }
)

这里我在“error.config”中有请求的所有数据，所以我想要将此对象发送到新组件（TimeoutModalDialog）。我也想知道是否有更好的方法来创建和显示动态 vue 组件。

我希望你能帮助我最好的问候

【问题讨论】：

这可能会有所帮助：stackoverflow.com/a/37521683/4617687

标签： vue.js timeout axios interceptor mount

【解决方案1】：

最后我实现了这个来解决我的问题：

authenticated.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.code === 'ECONNABORTED') {
      return new Promise((resolve, reject) => {
        var modalDialogId = "timeout-modal-dialog";
        if($('#' + modalDialogId).length){
          instance.$children[0].loadingComplete = true;
        } else {
          var ComponentClass = Vue.extend(TimeoutModalDialog);
          instance = new ComponentClass({
            propsData: {
              retryFunction: function () {
                instance.$children[0].loadingComplete = false;
                authenticated.request(error.config).then((response) => {
                  instance.$children[0].loadingComplete = true;
                  $("#" + modalDialogId).modal("close");
                  resolve(response);
                }, (error) => {
                  instance.$children[0].loadingComplete = true;
                  reject(error);
                })
              },
              cancelFunction: function () {
                instance.$children[0].loadingComplete = true;
                $("#" + modalDialogId).modal("close");
                reject(error);
              },
              dialogId: modalDialogId
            }
          });
          instance.$mount();
          document.getElementById('modalVueGeneric').appendChild(instance.$el);
        }
      });
    } else {
      return Promise.reject(error);
    }
  }
);

它解决了我的问题。

感谢拉兰的建议。

【讨论】：