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

野生动物园2024-01-30 16:25

今天在封装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")