美文网首页
vue3中全局方法的使用【真·VUE3】

vue3中全局方法的使用【真·VUE3】

作者: 91Shan | 来源:发表于2022-05-17 10:54 被阅读0次

关于VUE3的使用,文档没看完就开始了一个项目,一路走来,见招拆招求百度。
关于全局方法的使用,找了又找,求了又求,依然无解,所以写写心得,我启用了10年前刚上班时候的window对象哇哈哈哈哈,学习之余写感想,欢迎砸锅!
举例:页面我用了vant3组件,通过Toast、Notify、Dialog等举例

1、想过用vue2的办法

无奈人家不支持this啊

this.$toast
this.$notify
this.$dialog.confirm

2、后来又用proxy

但是proxy 只适用于调试,线上会出问题! 因为getCurrentInstance()的返回类型存在null

import { ref, defineComponent, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$notify({ type: 'danger', message: `系统错误,请联系管理员` })

3、好,鄙人的野生方法来了

在main.js中

import { Toast,Notify,Dialog } from 'Vant'
const app = createApp(App) //- 这个无需多言了哈,大家都懂
const vants = [Toast, Notify,  Dialog]
app.use(Toast)
app.use(Notify)
app.use(Dialog)

//- 挂到window下
window.DVM = {
    Notify,
    Dialog
}

在vue中使用

window.DVM.Notify({ type: 'danger', message: `系统错误,请联系管理员` })

相关文章

网友评论

      本文标题:vue3中全局方法的使用【真·VUE3】

      本文链接:https://www.haomeiwen.com/subject/mhagurtx.html