如何在单独的js文件中调用vue文件

Question

问题详情：
有一个弹窗组件，
在.vue文件中，使用方式如下所示

<tui-modal :show="showFlag.login" @click="loginModalClick" @cancel="loginModalCancel" title="登录" content="您尚未登录账号,是否登录？"></tui-modal>

项目中，对于ajax请求进行了封装，用于自动处理常见的错误代码，对于所有错误进行统一拦截

现在我想在这个interface.js文件中，调用我的弹窗组件，应该如何调用？

Answer 1

这么有想法吗

// 首先vue文件是一个组件 需要实例化 
improt vue from 'vue'
import tuiModal from '你的组件路径'

let TuiModalConstructor = vue.extend(tuiModal)

let instance = new TuiModalConstructor ({
    data: {
        // 传递给组件的props
    }
  })
// 将组件添加到dom
document.body.appendChild(instance.$el)

// 何时实例 何时添加到dom 就是你的业务需求了

    

Answer 2

我是这样做的，弹窗组件就设计成类似mint-ui中的message-box支持js方法调用的方式，方便动态引入。但是js直接使用一个vue组件我也没有好的办法。。。