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")
相关推荐
wen's1 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络2 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺4 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear4 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息4 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月4 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu4 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js