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

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

官方的使用方法

image.png

我的方法

main.js中的代码

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')

组件中使用

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

效果
image.png


第二种方案

按照官方的来

image.png

组件中使用

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

import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
proxy.$toast("122")
posted @ 2022-10-31 21:32  奔跑的前端猿  阅读(2302)  评论(0编辑  收藏  举报