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

官方的使用方法

我的方法

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

效果

原文地址:http://www.cnblogs.com/sxdpanda/p/16845929.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性