vue3+vant 引入Dialog Toast都会失败报错not defined

今天在封装vant组件的时候,刚好要用到toast提示信息的组件,索性就按照官网提供的引入方法进行正常的引入,嘿,好家伙,一顿操作下来后发现竟然报Toast未定义,这就纳闷了,明明步骤都是对的啊,所以就开始各种百度,发现也好多人遇到这个问题,但都是通过在当前组件中引入toast的方法解决的,虽然这是个解决方法,不过有点麻烦,我就使用了vue3全局变量的方法把组件挂载到全局使用了

官方的使用方法

我的方法

main.js中的代码

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'vant/es/toast/style';
import { Toast } from 'vant'

const app = createApp(App)
app.config.globalProperties.$toast = Toast

app.use(store)
    .use(router)
app.mount('#app')

组件中使用

javascript 复制代码
// 获取组件的实例
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
proxy.$toast("122")

效果


第二种方案

按照官方的来

组件中使用

vue3 中的确是访问不到this,不过我们可以使用 getCurrentInstance方法获取组件的实例,这样就可以使用全局的toast方法了

javascript 复制代码
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
proxy.$toast("122")
相关推荐
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper8 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳8 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱8 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖9 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀9 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴9 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录9 小时前
JavaScript屏幕切换检测方案
前端·javascript