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

TUTsmile
  • 17

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

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

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

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

回复
阅读 2k
2 个回答

这么有想法吗

// 首先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 就是你的业务需求了

    

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

你知道吗?

宣传栏