Vant Toast怎么在Vue3里全局调用不生效？

樱潼 Dev 提问于 2026-03-15 22:58:21 阅读 63

组件

我在Vue3项目里按文档引入了Vant的Toast，但在组件里直接调用this.$toast或者Toast(‘提示’)都没反应，控制台也不报错，这是为啥？

我试过在main.js里use Toast，也试过局部引入，但都不行。下面是我的引入方式：

import { createApp } from 'vue'
import App from './App.vue'
import { Toast } from 'vant'

const app = createApp(App)
app.use(Toast)
app.mount('#app')

然后在组件方法里写 Toast('加载成功')，结果页面啥也没弹出来……是不是Vue3要用别的调用方式？

Toast轻提示 Vant

我来解答赞 9 收藏

反馈

2 条解答

夏侯秋梓 Lv1

Vue3版本的Vant Toast调用方式跟Vue2不一样，你用app.use(Toast)这种方式是行不通的。

直接用这个：

// main.js 不用任何额外配置，Vant组件会自动注册

import 'vant/lib/index.css';

import Vant from 'vant';



const app = createApp(App);

app.use(Vant);

app.mount('#app');

然后在组件里这样调用：

import { showToast } from 'vant';



export default {

  methods: {

    handleClick() {

      showToast('加载成功');

    }

  }

}

问题就在于Vant 3.x里Toast是个函数，不是插件。你之前app.use(Toast)相当于什么都没干，因为它根本不是那个用法。

直接import showToast就能用了，不用整那些花里胡哨的。

2026-03-19 12:37

Top丶艺硕 Lv1

这个问题很典型，核心原因是Vant 4.x的Toast调用方式已经完全变了，不再是组件式用法，而是函数式调用。

问题分析

你用的这种方式是Vant 3.x的写法。在Vant 4.x里，Toast已经从组件改成了函数，app.use(Toast)这种注册方式已经不存在了。你调用Toast('加载成功')不生效，是因为这个方法根本不存在，Vant 4.x里压根没导出Toast这个东东。

解决方案

直接改用Vant 4.x的函数式调用：

// main.js - 不需要任何额外配置，直接用

import { createApp } from 'vue'

import App from './App.vue'

import 'vant/lib/index.css'  // 别忘了引入样式

import Vant from 'vant'



const app = createApp(App)

app.use(Vant)  // 如果你想用其他组件的话

app.mount('#app')

// 组件里这样调用

import { showToast } from 'vant'



export default {

  methods: {

    handleClick() {

      // 直接调用showToast

      showToast('加载成功')

    }

  }

}

Vant 4.x的Toast API

不只是showToast，还有几个快捷方法：

import { showToast, showSuccessToast, showLoadingToast, showFailToast } from 'vant'



// 普通提示

showToast('普通提示')



// 成功提示

showSuccessToast('操作成功')



// 加载提示

showLoadingToast({

  message: '加载中...',

  forbidClick: true,  // 禁止点击

  duration: 0  // 不会自动消失

})



// 失败提示

showFailToast('操作失败')



// 关闭loading

closeToast()

总结

Vant 4.x的设计理念变了，Toast、Dialog、Notify这些都改成了函数式调用，不再需要use注册。控制台不报错是因为Vant根本没有导出Toast这个命名空间，你调用的是一个undefined值，JS对undefined调用方法才会报错，但你只是调用了Toast这个函数（虽然它不存在），所以静默失败了。

如果你是从旧项目迁移过来的，记得把所有的Toast.xxx()改成showToast相关的方法就行。

2026-03-17 18:43