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")
相关推荐
大怪v5 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda6 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机7 小时前
Promise 常见面试题(持续更新中)
前端·javascript
nueroamazing8 小时前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
WebDesign_Mu9 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了9 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎9 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端10 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
LuckySusu11 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js