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.来获取的,即this.来获取的,即this.this.toast()调用轻提示

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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐