vue3创建的项目中使用vant UI组件库toast轻提示

本文介绍在Vue3项目中使用vantUI组件库中的Toast组件的方法。通过全局引入并在组件内部调用,解决undefined问题,强调使用this.toast()进行调用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue3创建的项目中使用vant UI组件库toast轻提示为例

vant UI组件库给出的文档:
import { createApp } from ‘vue’;(拿到vue,在vue3中import Vue from ‘vue’;已经不可用)
从vant中引入Toast,再createApp().use(Toast),这是在项目中main.js内的代码,是全局引入的方式
在这里插入图片描述
vue创建的项目中,main.js的代码:
在这里插入图片描述
文档中在组件内使用轻提示的代码演示:
在这里插入图片描述
而在实际项目中,俺全局引入之后,在组件中直接使用Toast()是会报undefined的,找度娘帮忙之后发现,vue3里面是需要this. 来 获 取 的 , 即 t h i s . 来获取的,即this. this.toast()调用轻提示

(PS:在使用过程中发现个小细节,在main.js中use的时候写的是Toast(大写的),在组件中this. T o a s t ( ) 是 获 取 不 到 的 , 得 小 写 的 t h i s . Toast()是获取不到的,得小写的this. Toast()this.toast(),各位大佬自行验证)

如果对你有帮助,记得给个赞噢(~~)

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值